首页 > 其他分享 >狂神说css学习笔记

狂神说css学习笔记

时间：2023-03-07 22:56:00浏览次数：51  
标签：color 元素 笔记 background 狂神 font border 选择器 css

什么是CSS

Cascading Style Sheet层叠级联样式表

CSS：表现层（美化网页）如：字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动等。

CSS发展史

  • CSS1.0
  • CSS2.0 DIV(块)+CSS，HTML和CSS结构分离的思想，网页变得简单，利于SEO
  • CSS2.1 浮动，定位
  • CSS3.0 圆角，阴影，动画… 浏览器兼容性-

CSS的快速入门及优势

style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范，<style>可以编写CSS的代码,每一个声明最好使用分号结尾。
    语法：
        选择器{
            声明1;
            声明2;
            声明3;
        }

    -->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<h1>我是标题</h1>

</body>
</html>
h1{
    color: red;
}

  • css的优势：

    1.内容和表现分离

    2.网页结构表现统一，可以实现复用

    3.样式十分的丰富

    4.建议使用独立于html的css文件

    5.利用SEO，容易被搜索引擎收录

CSS的三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--内部样式-->

    <style>
        h1{
            color: green ;
        }
    </style>

    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<!--优先级：就近原则-->

    <!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
    <h1 style="color: red">我是标题</h1>

</body>
</html>

拓展：外部样式两种写法

  • 链接式：（在网页加载之前引入，影响加载速度）

    html

<!--外部样式-->
    <link rel="stylesheet" href="css/style.css">

  • 导入式：（在网页之后引入，可以在未引入之前播放一些简单动画，懒加载）

    是css2.1特有的

<!--导入式-->
    <style>
        @import url("css/style.css");
    </style>

选择器

作用：选择项目上某一个或某一类元素。定位元素。

基本选择器

标签选择器

选择一类标签，格式：标签{}

<style>
      /*标签选择器，会选择到页面上所有的标签*/
      h1{
        color: #a13d30;
      }
</style>

类选择器

选择所有class属性一致的标签，格式：.类名{}

<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    /*类选择器的格式  .class的名称{}
    好处：可以多个标签归类，是同一个 class
    可以复用
    */
    .gu{
      color: #3636bb;
    }

    .yan{
      color: #fd1100;
    }

    .leng{
      color: #00fd19;
    }
  </style>

</head>
<body>

<h1 class="gu">标题1</h1>
<h1 class="yan">标题2</h1>
<h1 class="leng">标题3</h1>
<h1 class="yan">标题4</h1>

<p class="yan">p标签</p>

</body>

id选择器

全局唯一，格式：#id名{}

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*id选择器 #id名称{}
        id必须保证全局唯一
        不遵循就近原则，固定的
        id选择器>class选择器>标签选择器
        */
        #gu{
            color: #fd00ea;
        }
        .style1{
            color: #00fdea;
        }
        h1{
            color: #fded05;
        }
    </style>

</head>
<body>

<h1 id="gu" class="style1">标签1</h1>
<h1 class="style1">标签2</h1>
<h1 class="style1">标签3</h1>
<h1>标签4</h1>
<h1>标签5</h1>

</body>

优先级：id选择器>class选择器>标签选择器

高级选择器

层次选择器

1.后代选择器：在某个元素的后面

/*后代选择器：body后的所有p标签*/

    body p{
        background: red;
    }

2.子选择器：一代，儿子

    /*子选择器：body儿子一代的p标签*/
    body>p{
        background: #3cbda6;
    }

3.相邻兄弟选择器：同辈（可选择紧接在另一元素后的元素，且二者有相同父元素）

/*相邻兄弟选择器：只有一个，相邻（向下）*/
    .active + p{
        background: #a13d30;
    }

4.普通兄弟选择器（选取所有指定元素之后的相邻所有兄弟元素。）

/*普通兄弟选择器*/
    .active~p{
        background: #02ff00;
    }

image

anchor伪类(链接的不同状态以以不同的方式显示)

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

结构伪类选择器

伪类：条件

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--避免使用class，id选择器-->
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: #02ff00;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
            background: #ff4832;
        }
        /*选中p1:定位到父元素，选择当前的第一个元素
        选择当前p元素的父级元素，选中父级元素的第一个,并且是当前元素才生效*/
        p:nth-child(2){
            background: #2700ff;
        }
        /*选中父元素下的p元素的第二个*/
        p:nth-of-type(2){
            background: yellow;
        }
        a:hover{
            background: #000b3e;
        }
    </style>

</head>
<body>
<a href="#">3123</a>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>

</body>

属性选择器（常用）

id+class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: #2700ff;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /*属性名， 属性名=属性值(正则)
        = 绝对等于
        *= 包含这个元素
        ^= 以这个开头
        $= 以这个结尾
        */
        /*存在id属性的元素 a[]{}*/
        /*a[id]{
            background: yellow;
        }*/
        /*id="first"的元素*/
        /*a[id="first"]{
            background: #00fd19;
        }*/
        /*class中有links的元素*/
        /*a[class*="links"]{
            background: yellow;
        }*/
        /*选择href中以http开头的元素*/
        /*a[href^="http"]{
            background: yellow;
        }*/

        a[href$="jpg"]{
            background: yellow;
        }
    </style>

</head>
<body>

<p class="demo">

    <a href="https://www.baidu.com/" class="links item first" id="first">1</a>
    <a href="https://blog.kuangstudy.com/" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="abc">6</a>
    <a href="/a.pdf">7</a>
    <a href="/abc.pdf">8</a>
    <a href="abc.dos">9</a>
    <a href="abc.dos" class="links item last">10</a>
</p>

</body>
</html>

美化网页元素

为什么要美化网页

  1. 有效的传递信息
  2. 美化网页，页面漂亮，才能吸引用户
  3. 凸显页面的主题
  4. 提高用户的体验

span标签

重点要突出的字，使用span标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #title1{
            font-size: 50px;
        }
    </style>

</head>
<body>

欢迎学习<span id="title1">Java</span>

</body>
</html>

字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*font-family: ; 字体
        font-size: ; 字体大小
        font-weight: ; 字体粗细
        color: ; 字体颜色*/
        body{
            font-family: "Arial Black", 楷体;
            color: #a13d30;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
        }
    </style>

</head>
<body>

<h1>内容简介</h1>
<p class="p1">《老人与海》故事的背景是在20世纪中叶的古巴。主人公是一位名叫圣地亚哥的老渔夫，配角是一个叫马诺林的小孩。风烛残年的老渔夫一连八十四天都没有钓到一条鱼，但他仍不肯认输，而是充满着奋斗的精神，终于在第八十五天钓到一条身长十八尺，体重一千五百磅的大马林鱼。</p>
<p>大鱼拖着船往海里走，老人依然死拉着不放，即使没有水，没有食物，没有武器，没有助手，左手抽筋，他也丝毫不灰心。经过两天两夜之后，他终于杀死大鱼，把它拴在船边。但许多鲨鱼立刻前来抢夺他的战利品。他一一地杀死它们，到最后只剩下一支折断的舵柄作为武器。结果，大鱼仍难逃被吃光的命运，最终，老人筋疲力尽地拖回一副鱼骨头。他回到家躺在床上，只好从梦中去寻回那往日美好的岁月，以忘却残酷的现实。</p>
<p>The Old Man and the Sea is one of Hemingway's most enduring works.Told in language of great simplicity and power,it is the story of an old Cuban fisherman,down on his luck,and his supreme ordeal——a relentless,agonizing battle with a giant marlin far out in the Gulf Stream.Here Hemingway recasts,in strikingly contemporary style,the classic thene of courage in the face of defeat,of personal triumph won from los.Written in 1952,this hugely successfully novella confirmed his power and presence in the literary world and played a huge part in his winning the 1954 Nobel Prize for Literature.</p>

</body>
</html>

文本样式

  • 颜色：
/*颜色 单词 red RGB 0~F RGBA*/
        h1{
            color: rgba(0,255,200,0.5);   /*rgba 最后一个参数为透明度*/
            }
  • 文本对齐的方式：
/*排版，居中*/
text-align: center;
  • 首行缩进：
text-indent: 2em;
  • 行高：
line-height: 200px;
  • 装饰：
/*下划线*/
text-decoration: underline;

/*删除线*/
text-decoration: line-through;

/*上划线*/
text-decoration: overline;
  • 文本图片水平对齐：
/*水平对齐~参照物，a，b*/
vertical-align: middle;

阴影

  • 正常情况下，a，a:hover
/*默认的颜色*/
a{
  text-decoration: none;
  color: black;
}
/*鼠标悬浮的颜色*/
a:hover{
  color: orange;
  font-size: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*默认的颜色*/
        a{
            text-decoration: none;
            color: black;
        }
        /*鼠标悬浮的颜色*/
        a:hover{
            color: orange;
            font-size: 30px;
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color: green;
        }
        /*未访问时候的样子*/
        a:link{
            color: #a13d30;
        }
        /*已访问时候的样子*/
        a:visited{
            color: #fd1100;
        }
        /*text-shadow:阴影颜色,水平偏移,垂直偏移,阴影半径*/
        #price{
            text-shadow: #3cc7f5 10px -10px 2px;
        }
    </style>

</head>
<body>

<a href="#">
    <img src="image/photo02.jpg" alt="">
</a>
<p>
    <a href="#">蒙奇·D·路飞</a>
</p>
<p>
    <a href="#">日本漫画《航海王》中的男主角</a>
</p>
<p id="price">
    悬赏金：￥300000000
</p>


</body>
</html>

列表

#nav{
    width: 300px;
    background: #a0a0a0;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 30px;
    background: red;
}
/*ul li*/
/*
line-style：
none 去掉原点
circle 空心圆
decimal 数字
square 正方形
*/
ul{
    background: #a0a0a0;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: #000;
}
a:hover{
    color: orange;
    text-decoration: underline;

}

背景

  • 背景颜色
  • 背景图片
div{
    width: 1000px;
    height: 700px;
    border: 1px solid red;
    background-image: url("images/photo02.jpg");
    /*默认是全部平铺的*/
}
.div1{
    background-repeat: repeat-x;
}
.div2{
    background-repeat: repeat-y;
}
.div3{
    background-repeat: no-repeat;
}

渐变

https://www.grabient.com/

/*background-color: #4158D0;*/
background: linear-gradient(225deg, #4158D0 0%, #C850C0 30%, #FFCC70 66%, #1de00e 100%);

盒子模型

image

什么是盒子模型

margin：外边距

padding：内边距

border：边框

边框

  • 边框的样式
  • 边框的粗细
  • 边框的颜色
/*body总有一个默认的外边距margin:0，常见操作*/
/*h1,ul,li,a,body{
    margin: 0;
    padding: 0;
    text-decoration: none;
}*/
/*border: 粗细，样式，颜色;*/
#box{
    width: 300px;
    border: 1px solid red;
}
h2{
    font-size: 16px;
    background-color: darkmagenta;
    line-height: 30px;
    color: white;
}
form{
    background: #3cbda6;
}
div:nth-of-type(1) input{
    border: 3px solid black;
}
div:nth-of-type(2) input{
    border: 3px dashed darkgoldenrod;
}
div:nth-of-type(2) input{
    border: 2px dashed darkcyan;
}

内、外边距

#box{
    width: 300px;
    border: 1px solid red;
    margin: 0 auto;
}
/*顺时针旋转，两个数就是上下和左右，三个数就是上和左右和下，四个数是上右下左*/
h2{
    font-size: 16px;
    background-color: darkmagenta;
    line-height: 30px;
    color: white;
    margin: 0 1px;
}
form{
    background: #3cbda6;
}
input{
    border: 1px solid black;
}
div:nth-of-type(1){
    padding: 10px 2px;
}

盒子的计算方式：你这个元素到底有多大？

元素大小= margin + border + padding +内容的宽度

圆角边框

div{
    width: 50px;
    height: 50px;
    background: red;
    /*左上，右上，右下，左下（顺时针方向）*/
    /*圆圈：圆角=半径;*/
    border-radius: 50px 0 0 0;
}

盒子阴影

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*margin: 0 auto;居中
        要求：块元素，块元素有固定的宽度*/
        img{
            width: 50px;
            height: 50px;
            margin: 0 auto;
            border-radius: 50px;
            box-shadow: 10px 10px 100px yellow;
        }
    </style>

</head>
<body>
    <div style="width: 500px; display: block;text-align: center;">
        <div style="margin: 0 auto;">
            <img src="images/photo02.jpg" alt="">
        </div>
    </div>
</body>

浮动

标准文档流

块级元素：独占一行，例，h1~h6、p、div

行内元素：不独占一行，行内元素可以被包含在块级元素中，反之则不可以。

display

/*
block 块元素
inline 行内元素
inline-block 是块元素，但是可以内联，在一行！
none
*/
div{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    display: none;
}
span{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    display: inline-block;
}

这个也是一种实现行内元素排列的方式，但是我们很多情况都是用float

float

左右浮动：

float: left;
float: right;

父级边框塌陷的问题

clear: right;/*右侧不允许有浮动元素*/
clear: left;/*左侧不允许有浮动元素*/
clear: both;/*两侧不允许有浮动元素*/
clear: none;

解决方案：

1.增加父级元素的高度（简单，元素假设有了固定的高度，就会被限制）

2.增加一个空的div（简单，代码中尽量避免空div）

<style>
  .clear{
            clear: both;
            margin: 0;
            padding: 0;
        }
</style>

<div class="clear"></div>

3.overflow（简单，下拉的一些场景避免使用）

在父级元素中增加一个overflow: hidden;

4.父类添加一个伪类：after（推荐，写法稍微复杂一点但是没有副作用，推荐使用！）

#content:after{
    content: '';
    display: inline-block;
    clear: both;
}

对比

  • display和float：display方向不可控制，float浮动起来会脱离标准文档流，需要解决父级边框塌陷的问题

定位

相对定位

body{
    padding: 20px;
}
/*相对定位，相对于自己的位置进行偏移*/
div{
    margin: 10px;
    padding: 5px;
    font-size: 12px;
}
#father{
    border: 1px solid #666;
}
#first{
    background-color: #a13d30;
    border: 1px dashed #b27530;
    position: relative;/*相对定位，上下左右*/
    top: -20px;
    left: 20px;
}
#second{
    background-color: #255099;
    border: 1px dashed #255066;
}
#third{
    background-color: #1c6699;
    border: 1px dashed #1c6615;
    position: relative;
    bottom: 10px;
    right: 20px;
}

相对于原来的位置进行指定的偏移，它仍然在标准文档流之中！原来的位置会被保留

绝对定位

定位：基于xxx定位，上下左右

1.没有父级元素定位的情况下相对于浏览器定位

2.假设父级元素存在定位，我们通常会相对于父级元素进行偏移

3.相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流之中，原来的位置不会被保留。

#father{
            border: 1px solid #666;
            padding: 0;
            position: relative;
        }
#second{
    background-color: #255099;
    border: 1px dashed #255066;
    position: absolute;
    left: 100px;
}

固定位置fixed

body{
    height: 1000px;
}
div:nth-of-type(1){
    /*绝对定位相对于浏览器*/
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    right: 0;
    bottom: 0;
}
div:nth-of-type(2){
    /*fixed固定定位*/
    width: 50px;
    height: 50px;
    background: yellow;
    position: fixed;
    right: 0;
    bottom: 0;
}

z-index

z-index：默认是0，最高是无限。

#content{
    width: 320px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #000 solid;
}
ul,li{
    padding: 0;
    margin: 0;
    list-style: none;

}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipTest,.tipBg{
    position: absolute;
    width: 380px;
    top: 175px;
    height: 25px;
}
.tipTest{
    color: white;
    /*z-index: 0;*/
}
.tipBg{
    background: #000;
    opacity: 0.5;/*背景透明度*/
    /*filter: opacity(50%);*/
}

动画

未完待续

标签：color,元素,笔记,background,狂神,font,border,选择器,css
From： https://www.cnblogs.com/zzx-blogs/p/17182196.html

相关文章

  • 2023爬虫学习笔记 -- m3u8视频下载
    一、目标地址https://www.XXXX.com/二、获取mu38文件1、点击XHR，刷新页面，会看到这里有两个m3u8文件2、将m3u8地址复制到浏览器，会自动下载下来，index内容如下mixed内容如下3、......
  • 人月神话阅读笔记之一
    这段时间看了老师推荐的《人月神话》，这不是我第一次听闻这本书，当初的概论课上就有听老师说起过这本书，如今终于是第一次上手了。作者在书中的第一章——焦油坑，给我们讲述......
  • Python学习笔记（八）列表与元组
    一、列表的创建示例：1#列表中的元素可以是任意数据类型2li=[1,2,3,4,'张三','李四']3print(li)4li1=[]#空列表用于存放数据5#list()中必须是可......
  • 卡特兰数学习笔记
    参考了这篇博客引入\(n\)个元素进栈序列为：\(1,2,3,4...n\)，求总共有多少种出栈序列。将进栈表示为\(+1\)，出栈表示为\(-1\)，则\(1,3,2\)的出栈序列可以表示为：\(+1,-1,......
  • Java官方笔记1编写运行Java程序
    你可能已经迫不及待想安装Java，写个Java程序跑起来了。但是在这之前，有些概念需要提前了解，因为Java跟C、C++和Python都有点不一样。编译和执行我们在文本文件中编写英文代......
  • 优化 CSS 代码的12个小技巧
    优化CSS代码的12个小技巧2022-11-2509:03·Echa攻城狮 大家好，我是Echa。今天来分享12个优化CSS代码小技巧！1.避免高消耗属性分析表明，一些CSS属性的渲染速......
  • 48个高颜值的CSS在线工具大全
    48个高颜值的CSS在线工具大全原创2023-01-1308:00·Echa攻城狮 大家好，我是Echa。最近有一部分粉丝们总是私信小编，作为一个前端或者全栈程序员怎么系统化学CSS，怎么......
  • C++笔记-指针
    1.const指针和指向const的指针指向const的指针是在类型前加星号可以指向非const类型指针可以改变指向dereference不能改变值const指针是在类型后面加星号指针不可......
  • C++笔记-static本地变量
    static本地变量只能被本地看到，所以不同函数之间的static变量相同也没事，但是同一个函数调用多次会忽略后面的初始化。#include<iostream>voidmyStaticFunction(){......
  • C++笔记-函数指针
    函数指针语法://fcnPtrisapointertoafunctionthattakesnoargumentsandreturnsanintegerint(*fcnPtr)();特点:函数指针的类型(参数和返回值)都必须和......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99