CSS学习

sxsl_lwp

已于 2022-05-15 09:20:41 修改

阅读量166

点赞数

分类专栏：技术类文章标签： css 学习 html

于 2021-04-23 17:10:26 首次发布

本文链接：https://blog.csdn.net/sxsl_lwp/article/details/115874826

版权

技术类专栏收录该内容

21 篇文章 1 订阅

订阅专栏

CSS学习

一、Css基础
二、选择器
三、文本样式
四、超链接伪类
五、阴影、列表、背景
六、盒子模型
七、浮动
八、定位

一、Css基础

什么是css：层叠（级联）样式表，用于美化网页，包括字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动等。
浏览器中打开开发者模式：设置——>更多工具—>开发者模式即刻。
css语法：每个声明用“;”结尾。
选择器{
声明1;
声明2;
声明3 ;
…
}
快速入门脚本

<!DOCTYPE html>
<html lang="en">
<head>
    <!--
    单独写一个style.css文件，内容如下，用link将其引入
    h1{
         color: blue;
     }
    -->
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 style="alignment: center">我是标题</h1>
</body>
</html>

Css优势：
(1) 内容和表现分离；
(2) 网页结构表现统一，可以实现复用；
(3) 样式十分丰富；
(4) 建议采用独立于html文件的css文件;
(5) 利用seo，容易被搜索引擎收录。
css的导入方式：行内样式、内部样式、外部样式；优先级：遵循就近原则(采用离标签最近的样式)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--外部样式,链接方式-->
    <link rel="stylesheet" href="css/style.css">
     <!--外部样式，导入式，2.0支持-->
    <style>
        @import "css/style.css";
    </style>   
    <!--内部样式表-->
    <style>
        h1{
            color: blue;
        }
    </style>
</head>
<body>
<!--行内样式，在标签元素中增加style属性-->
<h1 style="color: black">lwp标题</h1>
<!--优先级：行内样式>内部样式>外部样式-->
</body>
</html>

二、选择器

（一）、常规选择器

标签选择器：选择一类标签，用法：标签名+{}

        h1{
            color: darkblue;
        }

类选择器：选择class属性相同的标签，可以跨标签类别；用法.+class名+{} 。

        .lwp1{
            color: yellow;
        }

id选择器：id唯一；用法：#+id名+{}。

        #lwp{
            color: blueviolet;
        }

优先级：id选择器>类选择器>标签选择器。

（二）、层次选择器

层次选择器的种类：后代选择器、子选择器、相邻兄弟选择器（相邻的下一个兄弟，非上一个兄弟）、通用兄弟（该元素后面的兄弟元素，非前面的兄弟元素）。
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style>
        /*后代选择器*/
        body p{
            background: red;
        }
        /*子选择器*/
        body>p{
            background: gold;
        }
        /*相邻兄弟选择器,相邻的下一个非上一个*/
        .active +p{
            font-size: 50px;
        }
        /*通用兄弟选择器，选择当前所以乡下的兄弟元素*/
        .active~p{
            color: yellow;
        }

    </style>

</head>
<body>
<p>p0</p>
<P class="active">p1</P>
<P>p2</P>
<P>p3</P>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
<p>p7</p>
<p>p8</p>
</body>
</html>

（三）、结构伪类选择器

结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。
常见结构伪类选择器

选择器	功能描述	版本
E:last-child	选择父元素的倒数第一个子元素E，相当于E:nth-last-child(1)
E:nth-child(n)	选择父元素的第n个子元素，n从1开始计算	3
E:nth-last-child(n)	选择父元素的倒数第n个子元素，n从1开始计算	3
E:first-of-type	选择父元素下同种标签的第一个元素，相当于E:nth-of-type(1)	3
E:last-of-type	选择父元素下同种标签的倒数第一个元素，相当于E:nth-last-of-type(1)	3
E:nth-of-type(n)	与:nth-child(n)作用类似，用作选择使用同种标签的第n个元素	3
E:nth-last-of-type	与:nth-last-child作用类似，用作选择同种标签的倒数第一个元素	3
E:only-child	选择父元素下仅有的一个子元素，相当于E:first-child:last-child或E:nth-child(1):nth-last-child(1)	3
E:only-of-type	选择父元素下使用同种标签的唯一子元素，相当于E:first-of-type:last-of-type或E:nth-of-type(1):nth-last-of-type(1)	3
E:empty	选择空节点，即没有子元素的元素，而且该元素也不包含任何文本节点	3
E:root	选择文档的根元素，对于HTML文档，根元素永远HTML	3

结构伪类选择器很容易遭到误解，需要特别强调。如，p:first-child表示选择父元素下的第一个子元素 p，而不是选择 p 元素的第一个子元素。
需要注意的是，结构伪类选择器中，子元素的序号是从 1 开始的，也就是说，第一个子元素的序号是 1，而不是 0。换句话说，当参数 n 的计算结果为 0 时，将不选择任何元素。
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--避免使用id和class选择器-->
    <style>
        /* ul的第一个元素 */
        ul li:first-child{
            background: red;
            font-size: 60px;
        }
        /*ul的最后一个元素*/
        ul li:last-child{
            color: darkblue;
            font-size: 45px;
        }
        /* 选中P1,定位到父元素，选择当前的第一个元素
        P:nth-child(1)选中当前P元素的父元素，选中父元素的第一个元素，按顺序
        */
        P:nth-child(1){
            color: darkblue;
            font-size: 45px;
        }
        /* 选中父元素的P元素的第二个，按类型*/
        P:nth-of-type(2){
            color: rgba(128, 97, 131, 0.35);
            font-size: 45px;
        }
        /* 链接的一个伪类选择器*/
        a:hover{
            background: yellow;
        }
    </style>
</head>
<body>
    <a href="">124</a>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
</body>
</html>

（四）、属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。
常见的属性选择器

Selectors选择符	CSS Version版本	Description简介
E[att]	CSS2	选择具有att属性的E元素。
E[att=“val”]	CSS2	选择具有att属性且属性值等于val的E元素。
E[att~=“val”]	CSS2	选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。
E[att^=“val”]	CSS3	选择具有att属性且属性值为以val开头的字符串的E元素。
E[att$=“val”]	CSS3	选择具有att属性且属性值为以val结尾的字符串的E元素。
E[att*=“val”]	CSS3	选择具有att属性且属性值为包含val的字符串的E元素。
E[att\|=“val”]	CSS2	选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

脚本

<!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: darkblue;
            color: yellow;
            text-align: center;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /* 存在id属性的函数 a[]{}；[]中有两种用法，属性名,属性名=属性值(正则);
           =是绝对等于，*=是包含这个字符,^=以什么开始，$=以什么结尾。
        */
        a[id]{
            background: red;
        }
        a[id=first]{
            background: green;
        }
        /*class 中有links的元素
        */
        a[class *="links" ]{
            background: orange;
        }
        /*选中href以http开头的元素*/
        a[href ^=http]{
            background: yellowgreen;
        }
        /*选中href以doc开头的结尾*/
        a[href $=doc]{
            background: fuchsia;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="https://www.baidu.com" class="links item first" id="first">1</a>
    <a href="" class="links item active " target="_blank" title="test">2</a>
    <a href="image/123.html" class="links item">3</a>
    <a href="image/123.png"  class="links item" >4</a>
    <a href="image/123.jpg" class="links item" >5</a>
    <a href="abc" class="links item" >6</a>
    <a href="/a.pdf"  class="links item" >7</a>
    <a href="/abc.pdf" class="links item" >8</a>
    <a href="abc.doc" class="links item" >9</a>
    <a href="abc3.doc" class="links item">10</a>
</p>
</body>
</html>

三、文本样式

文本缩进：text-indent
水平对齐：text-align:center;left;right;
字间隔和字母间距：word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的；letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。
字符转换：text-transform
文本装饰：text-decoration

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。=
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

超链接去下划线：text-decoration: none;
颜色：单词； rgb（红绿蓝）：#ffffff（如#方法ff0000代表红，#00ff00代表绿，#0000ff代表蓝）; rgba：a为透明度； height=line-height时，单行文字上下居中。

四、超链接伪类

超链接伪类类型：a: link: 未访问的链接状态；a:visited: 已访问的链接状态；a:hover :鼠标悬停到链接上的状态；Active:表示正在点击超链接时刻的状态。
脚本：

<style>
        a:link { 
            color: blue;
        }
        a:hover {
            color: red;
        }
        a:active { 
            color: yellow;
        }
        a:visited { 
               color: black;
        }
<style>

五、阴影、列表、背景

文本阴影：（text-shadow: 1px 1px 1px lightgray）
第一个1px:是向x坐标方向的偏移
第二个1px;是向y坐标方向的偏移
第三个1px；是模糊距离
第四的参数：颜色
边框阴影（box-shadow: 30px 30px 80px black）
第一个参数：x方向上的偏移
第二个参数；y方向上的偏移
第三个参数：模糊距离
第四个参数：颜色
列表属性类别

名称	描述
none：	不使用项目符号
disc：	实心圆
circle：	空心圆
square：	实心方块
decimal：	阿拉伯数字
lower-alpha：	小写英文字母
upper-alpha：	大写英文字母
lower-roman：	小写罗马数字
upper-roman：	大写罗马数字
(1) html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h2 class="titel">全部商品</h2>
<div id="nav">
    <h2 class="titel">全部商品</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">打火机</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">礼品精包</a>&nbsp;&nbsp;<a href="#">钟表</a></li>

    </ul>
</div>
</body>
</html>

(2) css代码

#nav{
    width: 300px;
    background: aqua;
}
.titel{
    font-size: 10px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 45px;
    background: red;
}

/* list-style
    默认是实心圆；
    none去掉前面的圆圈
    circle空心圆
    decimal有序
    square正方形
*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    color: #000;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: #000000;
}
a:hover{
    color: orange;
}

背景
(1) 背景属性

属性	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。
(2) 渐变：所有的渐变，都是通过 background-image 进行设置
线性渐变：linear-gradient
径向渐变：radial-gradient
重复线性：repeating-linear-gradient
重复径向：repeating-radial-gradient

六、盒子模型

盒子的组成

一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。
margin:盒子的外边框，他是完全透明的，开发者只可以设置它的边距；margin包含了上下左右四条边，开发者可以单独设置每一条边的边距。
padding：padding表示盒子的内边距（填充）。与外边距不同，padding不是只能完全透明的，可以设置背景颜色和图片；与margin类似，padding包含了上下左右四条边，开发者可以单独设置每一条边的边距。
border：表示盒子的边界，它可以设置成可见的，样式多样的。
(1) 外边距的妙用居中：margin: 0 auto;
(2) 元素长宽的大小=margin+border+padding+内容的宽度或长度。
(3) border属性：border-width：边界宽度；border-style：边界样式；border-color：边界颜色。
(4) border-sytle属性可取值

名字	描述
none：	定义无边框。
hidden：	与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted：	定义点状边框。在大多数浏览器中呈现为实线。
dashed：	定义虚线。在大多数浏览器中呈现为实线。
solid：	定义实线。
double：	定义双线。双线的宽度等于 border-width 的值。
groove：	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge：	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset：	定义 3D inset 边框。其效果取决于 border-color 的值。
outset：	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit：	规定应该从父元素继承边框样式。、
(5）开发者还可以对单独一条边界单独设置宽度、样式或颜色。
(6) 边界半径，也就是圆角。边界半径由属性border-radius进行控制，这是一个简写属性，像上面提到过的margin、padding等一样，可以有一个、两个、三个或四个值进行设置。同样也可以对盒子的每一个角的半径进行单独设置。

图形边界：图形边界是用图形来作为盒子的边界border。

属性名	描述
border-image：	设置图形边界，简写属性
border-image-source：	图形的来源（路径），可以接收一个URL函数或一个渐变作为值。
border-image-slice：	图形的切片大小
border-image-width：	图形边界的宽度
border-image-repeat：	定义图片如何填充边框
border-image-outset：	定义边界内部和内边距之间的额外空间的大小

盒子阴影：在盒子的组成成分之外，CSS3给盒子添加了阴影。盒子的阴影由box-shadow属性控制，阴影的轮廓与盒子边界border的轮廓一样。该属性的正规语法如下：

名字	描述
inset：	默认阴影在边框外。使用 inset 后，阴影在边框内（即使是透明边框），背景之上内容之下。
offset-x, offset-y：	这是头两个长度值，用来设置阴影偏移量，相对于border外边线开始计算。offset-x 设置水平偏移量，如果是负值则阴影位于元素左边。offset-y 设置垂直偏移量，如果是负值则阴影位于元素上面。如果两者都是0，那么阴影位于元素后面。这时如果设置了 blur-radius 或 spread-radius 则有模糊效果。
blur-radius：	这是第三个长度值。值越大，模糊面积越大，阴影就越大越淡。不能为负值。默认为0，此时阴影边缘锐利。
spread-radius：	这是第四个长度值。取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。
color：	如果没有指定，则由浏览器决定——通常是color的值，不过目前Safari取透明。

飞冰网站，门户网站模板之家

七、浮动

块级函数：独占一行，如h1-- h6 、p、div、列表
行级元素：span、a、img、strong等；行级元素可以被包含在块级元素中，反之不行。
inlin-block：可以实现行内元素的排列方式，实际中多数情况用float。
float：
父级边框塌陷：
(1) clear：清楚浮动，left、right、both。
(2) 增加父级元素的高度，把所有元素均包在内。
(3) 增加一个空的div，清除浮动

<div class="clear"></div>
//在style中清除浮动
.clear{
      clear:both;
}

(4) overfloat ：在父级元素添加overfloat :hidden;属性。
(5) 在父类增加一个伪类：最常用的方法

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

小结
(1) 浮动元素后面增加空的div，特点：简单，但代码中尽量避免空的div。
(2) 设置父元素的高度，特点：简单，元素假设有了固定高度，就会被限制。
(3) overflow，特点：简单，但有下拉的场景，尽量避免使用。
(4) 在父类增加伪类：after（推荐），特点：写法稍微复杂，但没有副作用。
display与float对吧
(1) display：方向不可控；
(2) float：浮动起来会脱离标准文档流，所以要解决浮动后父级边框塌陷问题。

八、定位

相对定位：position: relative;相对原来的位置，进行指定的偏移；相对定位后，它仍然在标准文档流之中；原来的位置被保留。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background: rgba(66, 66, 135, 0.29);
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover{
            background: blue;
        }
        .a2,.a4{
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a5{
            position: relative;
            left: 100px;
            top: -300px;
        }
    </style>
</head>
<body>
<div id="box">
    <a class="a1" href="#">链接1</a>
    <a class="a2" href="#">链接2</a>
    <a class="a3" href="#">链接3</a>
    <a class="a4" href="#">链接4</a>
    <a class="a5" href="#">链接5</a>
</div>
</body>
</html>

绝对对位：position:absolute;
(1) 定位，基于XXX定位，方向为上下左右；
(2) 没有父级元素定位时，就相对于浏览器定位。
(3) 若父级元素存在，则相对于父级元素进行偏移；在父级元素范围内移动。
(4) 绝对定位，它不在标准文档流中，原来的位置不会被保留。
固定定位：position:fixed;

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       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){
           width:50px;
           height:50px;
           background:yellow;
           position:fixed;
           right:0;
           bottom:0;
       }
   </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

position的4个属性

属性名	功能描述
relative	相对它本身的位置来进行偏移的
absolute	相对于父级元素或浏览器，
fixed	fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。
static	position的默认值，一般不设置position属性时，会按照正常的文档流进行排列