前端CSS

已于 2024-09-16 21:43:45 修改
阅读量1.9k 收藏 45
点赞数 23
文章标签： 前端 css
于 2024-03-02 17:38:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73557953/article/details/136418786
版权

写哪里：

css写在style标签中，style标签一般写在head标签里面，title标签下面

怎么写：pData\Roaming\Typora\typora-user-images\image-20240116104941407.png" alt="image-20240116104941407" style="zoom:33%;" />

注：选择器——找标签用的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* css的注释 */
        /* 选择器 {css属性} */
        /* 选择器的作用：查找标签 */
    </style>
</head>
<body>
    
</body>
</html>

css引入方式：

内嵌式：css写在style标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
         color:red;
         font-size: 30px;
         background-color: aquamarine;
         width:400px;
         height: 400px;   
        }
    </style>
</head>
<body>
    <p>这是p标签</p>
</body>
</html>

外联式：css写在一个单独的.css文件中；需要通过link标签在网页中引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 关系：样式表 ； 找路径 -->
    <link rel="stylesheet" href="./my.css">
</head>
<body>
    <p>这是p标签</p>
</body>
</html>
p{
    color:red;
}

行内式：css写在标签的style属性中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页的标题</title>
</head>
<body>
    <p>这是p标签</p>
    <div style="color: red; font-size:30px">这是div标签</div>
</body>
</html>

选择器

标签选择器

以标签名命名的选择器

结构：标签名 { css属性名：属性值；}

类选择器

结构：.类名 { csss属性名：属性值；}

注：

  1. 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）

  2. 类名可以重复，一个类选择器可以同时选中多个标签

  3. 类名可以由数字、字母、下划线、中划线组成，但不能以数字或中划线开头

  4. 一个标签可以同时有多个类名，类名之间以空格隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            color: red;
        }
        .size{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>111</p>
    <p class="red size">222</p>
</body>
</html>
id选择器

结构：#id属性 { css属性：属性值； }

注：

  1. 所有标签上都有id属性

  2. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！

  3. 一个标签上只能有一个id属性值

  4. 一个id选择器只能选中一个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #blue{
            color: skyblue;
        }
    </style>
</head>
<body>
    <div id="blue">这个div文字是蓝色的</div>
</body>
</html>
通配符选择器

结构：* { css属性名： 属性值；}

能选中所有标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            color:red;
        }
    </style>
</head>
<body>
    <div>div</div>
    <p>pppp</p>
    <h1>h1</h1>
    <span>span</span>
</body>
</html>

字体和文本样式

字体样式
字体大小：font-size

取值：数字 + px(像素单位)

浏览器中默认字号：16

字体粗细：font-weight

取值：关键字 normal（正常） ；bold（加粗）

数字 400 （正常） ；700（加粗）

字体样式：font-style （控制文字变倾斜）

取值：normal（正常） ; italic（倾斜）

字体类型：font-family

取值：微软雅黑、宋体、黑体 ......

字体类型：font属性连写

取值：font : style weight size family

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            font:normal 700 66px 宋体
        }
    </style>
</head>
<body>
    <p>这是p标签</p>
</body>
</html>

只能省略前两个

文本样式
文本缩进：text-indent

取值：数字 + px

或 数字+em ; em为一个字的大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            text-indent:32px;
            /* 首行缩进2个字的大小 ； 默认字号：16px ; 32 */
        }
    </style>
</head>
<body>
    <p>2009年,事件视界望远镜团队让世界首次看到了黑洞的样子</p>
</body>
</html>
文本水平对齐方式 ：text-align

取值：

属性值效果
left左对齐
center居中对齐
right右对齐
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            text-align: center;
        }
        body{ 
            text-align: center;
        }
        /* 图在body里面 */
        img{
            width: 300px;
        }
    </style>
</head>
<body>
    <h1>新闻标题</h1>
    <img  src="./向日葵.jpg" alt="" >
</body>
</html>

text-align : center 能让哪些元素水平居中

文本

span标签、a标签

input标签、img标签

注：如果需要让以上元素水平居中，text-align: center需要给以上元素的父元素设置

文本修饰：text-decoration

取值:

属性值效果
underline下划线(常用)
line-through删除线(不常用)
overline上划线(几乎不用)
none无装饰线(常用)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            text-decoration: none;
        }
        /* 超链接去下划线 */
    </style>
</head>
<body>
    <a href="#">我是超链接，点呀</a>
</body>
</html>
行高

作用：控制一行的上下行间距

属性名：line-height

取值：数字 + px

或 倍数（当前标签font-size的倍数)

注：font : style weight size/line-height family；

选择器的进阶
复合选择器
后代选择器

作用：选择父元素后代中满足条件的元素

选择器语法：选择器1 选择器2 {css}

注意：

后代包括：儿子、孙子、重孙子.......

选择器与选择器之间通过空格隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div p{
            color:red;
        }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
    <div>
        <p>这是div的儿子p</p>
    </div>
</body>
</html>

父选择器 后代选择器 { }

子代选择器：>

作用：选择父元素子代中满足条件的元素

选择器语法： 选择器1 > 选择器2 { css }

注：子代只包括：儿子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 只想选中儿子 */
        div>a{
            color:red;
        }
    </style>
</head>
<body>
    <div>
        父级
        <a href="#">这是div里面的a</a>
        <p>
            <a href="#">这是div里面的p里面的a</a>
        </p>
    </div>
</body>
</html>
并集选择器: ,

作用：同时选择多组标签，设置相同的样式

选择器语法：选择器1 ，选择器2 { css }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p,
        div,
        span,
        h1{
            color:red;
        }
    </style>
</head>
<body>
    <p>ppp</p>
    <div>div</div>
    <span>span</span>
    <h1>h1</h1>
​
    <h2>h2</h2>
</body>
</html>
交集选择器

作用：选中页面中同时满足多个选择器的标签

选择器语法：选择器1选择器2 { css }

注：交集选择器中的选择器是紧挨着的，没有东西分隔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p.box{
            color:red;
        }
    </style>
</head>
<body>
    <p class="box">这是p标签: box</p>
    <p>pppppppp</p>
    <div class="box">这是div标签: box</div>
</body>
</html>

hover伪类选择器

作用：选中鼠标悬停在元素上的状态，设置样式

选择器语法: 选择器:hover {css}

注：任何标签都可以添加伪类，任何一个标签都可以悬停

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:hover{
            color:red;
        }
    </style>
</head>
<body>
    <a href="#">这是超链接</a>
</body>
</html>
emmet语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- div 同级 p + -->
    <div></div>
    <p></p>
    <!-- 父子 > -->
    <div>
        <p></p>
    </div>
​
    <ul>
        <li></li>
    </ul>
​
    <!-- ul有3个li *乘号 ul>li*3-->
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
​
    <!-- ul有3个li ,li里有文字111 {文字} ul>li{111}*3-->
    <ul>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ul>
​
    <!-- ul有3个li,li文字1，2，3  ul>li{$}*3-->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>
背景相关属性

px像素

背景颜色

属性名：background-color

背景图片

属性名：background-image

背景平铺

属性名：background-repeat

属性值：

取值效果
repeat(默认值)水平和垂直方向都平铺
no-repeat不平铺
repeat-x沿水平方向(x轴)平铺
repeat-y沿垂直方向(y轴)平铺
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 400px;
            height:400px;
            background-color: pink;
            background-image: url(./向日葵.jpg);
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>
背景位置

属性名：background-position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:400px;
            height:400px;
            background-color: pink;
            background-image: url(./向日葵.jpg);
            background-repeat: no-repeat;
            /* background-position: right 0; */
            /* background-position: right bottom; */
            background-position: center center;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:400px;
            height:400px;
            background-color: pink;
            background-image: url(./向日葵.jpg);
            background-repeat: no-repeat;
            /* background-position: right 0; */
            /* background-position: right bottom; */
            /* background-position: center center; */
            
            /* 正数：向右向下移动 ； 负数：向左向上移动 */
            /* background-position: 50px 50px; */
            background-position: -50px -100px;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

背景色和背景图只显示在盒子里面

背景相关属性连写

属性名：background

书写顺序推荐：background：color image repeat position

不分先后顺序；背景图位置如果是英文单词可以颠倒顺序，数值不可以颠倒顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:400px;
            height: 400px;
            background: pink url(./向日葵.jpg) no-repeat center center;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

扩展：

背景图的缩放

背景相关属性连写：background：color image repeat position/size

元素显示模式
块级元素

特点：

  1. 独占一行

  2. 宽度默认是父级的100%

  3. 添加宽高都生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>111</div>
    <div>222</div>
</body>
</html>
行内元素

显示特点：

  1. 一行可以显示多个

  2. 宽度和高度默认由内容撑开

  3. 不可以设置宽高；设置宽高不生效

代表标签：a、span

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            width:300px;
            height:300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <span>span</span>
    <span>span</span>
</body>
</html>

行内块元素

因为它们具有块元素和行内元素的特点；故称为行内块元素

显示特点：

  1. 一行可以显示多个

  2. 可以设置宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width:100px;
            height:100px;
        }
    </style>
</head>
<body>
    <img src="./向日葵.jpg" alt="">
    <img src="./向日葵.jpg" alt="">
</body>
</html>

代表标签：input、textarea

元素显示模式转换

语法：

属性效果
display:block转换成块级元素
display:inline-block转换成行内块元素
display:inline转换成行内元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:300px;
            height:300px;
            background-color:pink;
            display:inline;
        }
    </style>
</head>
<body>
    <div>1111</div>
    <div>2222</div>
</body>
</html>

标签的嵌套扩展：

  1. p和h标题不能相互嵌套

  2. p里不能包含div

  3. a标签不能嵌套a标签

css特性
继承性

所有控制文字的属性（color、font-style、font-weight、font-size、font-family、text-indent、text-align、line-height...00）都能继承；不是控制文字的都不能继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            color:red;
        }
    </style>
</head>
<body>
    <div>
        这是div标签里面的文字
        <span>这是div里面的span</span>
    </div>
</body>
</html>

注：没有就继承爹的，有就听自己的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            color:red;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">超链接</a>
        <h1>一级标题</h1>
    </div>
</body>
</html>
层叠性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            color:red;
            color:pink;
        }
​
        .box{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="box">文字</div>
</body>
</html>
优先级

继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            color:red;
        }
        div{
            color:green !important;
        }
    </style>
</head>
<body>
    <div style="color:pink;">测试优先级</div>
</body>
</html>
权重叠加计算

盒子模型

CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区（border）、外边距区域（margin）构成，这就是盒子模型。

参考：CSS基础知识(二）——盒子模型_css盒模型-CSDN博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:300px;
            height:300px;
            background-color: pink;
            /* 边框线 == 纸箱子 */
            border:1px solid #000;
            /* 内边距 == 填充泡沫 ：出现在内容和盒子边缘之间*/
            padding: 20px;
            /* 外边距 ：出现在两个盒子之间，出现在盒子的外面*/
            margin:50px;
        }
    </style>
</head>
<body>
    <div>内容电脑</div>
    <div>内容电脑</div>
</body>
</html>

内容区域（content）的宽度和高度

作用：利用width和height属性默认设置盒子内容区域的大小

属性：width / height

常见取值：数字+px

边框（border）

属性值：边框线粗细像素 线条种类 线条颜色

如：border：10px solid red;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:200px;
            height:200px;
            background-color: pink;
            /* border:实线 dashed:虚线 dotted:点线 */
            border:2px solid #000;
        }
    </style>
</head>
<body>
    <div>内容</div>
</body>
</html>
边框——单方向设置

场景：只给盒子的某个方向单独设置边框

属性名：border - 方位名词

border-top border-bottom border-left border-right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:200px;
            height:200px;
            background-color: pink;
            /* border:实线 dashed:虚线 dotted:点线 */
            border-left:2px solid #000;
        }
    </style>
</head>
<body>
    <div>内容</div>
</body>
</html>

单个属性：border-width border-style border-color

border会撑大盒子的尺寸

新浪导航例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            height:40px;
            border-top:3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
        }
        .box a{
            width:80px;
            height:40px;
            /* 转行内块元素 */
            display: inline-block;
            /* 水平居中 */
            text-align: center;
            /* 垂直居中 */
            line-height:40px;
            /* 文字大小 */
            font-size:12px;
            color:#4c4c4c;
            /* 去下划线 */
            text-decoration: none;
        }
        .box a:hover{
            background-color:#edeef0;
            color:#ff8400;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
    </div>
</body>
</html>

内边距（padding）

padding 属性可以当做复合属性使用，表示单独设置某个方向的内边距；padding最多取4个值

四值：上 右 下 左 (从最上开始顺时针转一圈)

三值：上 左右 下

两值：上、下 左、右 (上下相同；左右相同)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 添加了4个方向的内边距 */
            padding:50px;
​
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

灵活 => 用padding撑大距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            height:40px;
            border-top:3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
        }
        .box a{
            padding:0 16px;
            /* width:80px; */
            height:40px;
            /* 转行内块元素 */
            display: inline-block;
            /* 水平居中 */
            text-align: center;
            /* 垂直居中 */
            line-height:40px;
            /* 文字大小 */
            font-size:12px;
            color:#4c4c4c;
            /* 去下划线 */
            text-decoration: none;
        }
        .box a:hover{
            background-color:#edeef0;
            color:#ff8400;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#">新浪</a>
        <a href="#">新浪导航新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
    </div>
</body>
</html>

css3自动内减：减padding border

加属性box-sizing：border-box;

外边距（margin）

清除默认内外边距

*{
margin:0;
padding:0;
}
版心居中

网页有效内容居中；水平居中auto自适应，上下无所谓如：0

margin:0 auto;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:1000px;
            height: 100px;
            background-color: pink;
​
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div>版心</div>
</body>
</html>

结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选中第一个 */
        /* li:first-child{ 
            background-color: green;
        }*/
​
        /* 最后一个 */
        /* li:last-child{
            background-color: green;
        } */
​
        /* 任意一个 */
        /* li:nth-child(5){
            background-color: green;
        } */
​
        /* 倒数第xx个 */
        li:nth-last-child(1){
            background-color:blue;
        }
    </style>
</head>
<body>
    <!-- ul>li{这是第$个li}*8 -->
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
​
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 偶数 */
        li:nth-child(2n){
            background-color: pink;
        }
        /* 奇数 */
        li:nth-child(2n+1){
            background-color: red;
        }
        /* 前三个 */
        li:nth-child(-n+3){
            background-color: blue;
        }
    </style>
</head>
<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>
</html>
伪元素

通过css创建标签，装饰一些不重要的小图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width:300px;
            height:300px;
            background-color: pink;
        }
​
        .father::before{
            content:'老鼠';
            color:green;
            width:100px;
            height:100px;
            background-color: blue;
            /* 默认是行内元素，宽高不生效，转块级元素 */
            display:block;
        }
        .father::after{
            content:'大米';
        }
    </style>
</head>
<body>
    <div class="father">爱</div>
</body>
</html>
标准流
浮动

浏览器执行速度快

css属性书写顺序：1.浮动/display 2.盒子模型相关属性 margin border padding 宽度高度背景色 3.文字样式

浮动的作用

网页布局；块标签完美的在一行排列

浏览器解析行内块或行内标签的时候，如果标签换行书写就会产生一个空格的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            float:left;
        }
​
        div{
            width: 100px;
            height: 100px;
        }
        .one{
            background-color: pink;
            float:left;
        }
        .two{
            background-color: skyblue;
            /* right */
            float:left;
        }
    </style>
</head>
<body>
    <!-- 1.图文环绕 -->
    <!-- <img src="./向日葵.jpg" alt="">
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    哈哈哈哈哈哈哈哈哈哈哈哈哈 -->
    <!-- 2.网页布局：块在一行排列 -->
    <div class="one">one</div>
    <div class="two">two</div>
</body>
</html>
浮动的特点

1.浮动元素会脱离标准流，在标准流中不占位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            background-color: pink;
​
            float:left;
        }
​
        .two{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        
        .three{
            width: 300px;
            height: 300px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</body>
</html>

2.浮动元素比较准流高半个级别，可以覆盖标准流中的元素

3.浮动找浮动 下一个浮动元素会在上一个浮动元素后面左右浮动

浮动的标签 顶对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            background-color: pink;
​
            float:left;
        }
​
        .two{
            width: 200px;
            height: 200px;
            background-color: skyblue;
​
            float:left;
        }
        
        .three{
            width: 300px;
            height: 300px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</body>
</html>

不想盒子顶对齐 加margin外边距把盒子往下挪

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            background-color: pink;
​
            float:left;
​
            margin-top: 50px;
        }
​
        .two{
            width: 200px;
            height: 200px;
            background-color: skyblue;
​
            float:left;
        }
        
        .three{
            width: 300px;
            height: 300px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</body>
</html>

4.一行可显示多个且可设置宽高

去掉列表的符号：list-style：none;

清除浮动

清除浮动给别的标签带来的影响

受浮动影响的情况：父子级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响，会显示到上面的位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top{
            margin:0 auto;
            width:1000px;
            /* height:300px; */
            background-color: pink;
        }
​
        .bottom{
            height:100px;
            background-color: green;
        }
​
        .left{
            float:left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }
​
        .right{
            float:right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

父级加高度会规避该问题

对于不方便加高；如何清除浮动：

格外标签法

  1. 在父元素内容的最后添加一个块级元素

  2. 给添加的块级元素设置clear:both

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top{
            margin:0 auto;
            width:1000px;
            /* height:300px; */
            background-color: pink;
        }
​
        .bottom{
            height:100px;
            background-color: green;
        }
​
        .left{
            float:left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }
​
        .right{
            float:right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
​
        .clearfix{
            /*清除左右两侧浮动的影响*/
            clear: both;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clearfix"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

单伪元素清除法
  .clearfix::after{
            content:'';
            /* 伪元素添加的标签是行内的，要求块 */
            display:block;
            clear:both;
        }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top{
            margin:0 auto;
            width:1000px;
            /* height:300px; */
            background-color: pink;
        }
​
        .bottom{
            height:100px;
            background-color: green;
        }
​
        .left{
            float:left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }
​
        .right{
            float:right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
​
        .clearfix::after{
            content:'';
            /* 伪元素添加的标签是行内的，要求块 */
            display:block;
            clear:both;
        }
​
    </style>
</head>
<body>
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>
双伪元素清除法

清外边距塌陷也能清浮动

 .clearfix::before,
        .clearfix::after{
            content:'';
            display:table;
        }
        .clearfix::after{
            clear:both;
        }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top{
            margin:0 auto;
            width:1000px;
            /* height:300px; */
            background-color: pink;
        }
​
        .bottom{
            height:100px;
            background-color: green;
        }
​
        .left{
            float:left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }
​
        .right{
            float:right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
​
        .clearfix::before,
        .clearfix::after{
            content:'';
            display:table;
        }
        .clearfix::after{
            clear:both;
        }
​
    </style>
</head>
<body>
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>
给父元素设置overflow:hidden
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top{
            margin:0 auto;
            width:1000px;
            /* height:300px; */
            background-color: pink;
​
            overflow:hidden;
        }
​
        .bottom{
            height:100px;
            background-color: green;
        }
​
        .left{
            float:left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }
​
        .right{
            float:right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
​
        
    </style>
</head>
<body>
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

调节图片垂直对齐方式middle居中：vertical-align: middle;

CSS布局

CSS有哪些布局方式：标准流+浮动+定位

定位

一般用于 盒子之间的层叠情况；可以让盒子始终固定在屏幕中的某个位置

定位方式

1.属性名：position

常见属性值：

定位方式属性值
静态定位static
相对定位relative
绝对定位absolute
固定定位fixed

2.设置偏移值

静态定位

就是不定位

相对定位

相对于自己之前的位置进行移动

position: relative;

快捷：por

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            position: relative;
            left:100px;
            top:200px;
​
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">box</div>
</body>
</html>

特点：

  1. 占有原来的位置—— 即没有脱离标准流的控制

  2. 仍然具有标签原有的显示模式特点

  3. 改变位置参照自己原来的位置

如果left和right都有，以left为准；top和bottom都有，以top为准

绝对定位

相对于非静态定位（static）的父元素进行定位移动

position: absolute;

poa

1.先找已经定位的父级，如果有这样的父级就以这个父级为参照物进行定位；

2.有父级，但父级没有定位，以浏览器窗口为参照物进行定位

特点：

1.脱离标准流，不占位

2.改变标签的显示模式特点：具备行内块的特点（在一行共存，宽高生效）

子绝父相

父级相对定位；子级绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 400px;
            height: 400px;
            background-color: pink;
        }
        .son{
            position: relative;
​
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        .sun{
            position: absolute;
            right:20px;
            bottom:50px;
​
​
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            <div class="sun"></div>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            position: relative;
​
            width: 400px;
            height: 400px;
            background-color: pink;
        }
        .son{
            
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        .sun{
            position: absolute;
            right:20px;
            bottom:50px;
​
​
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            <div class="sun"></div>
        </div>
    </div>
</body>
</html>

绝对定位查找父级的方式：就近找定位的父级，如果逐层查找不到这样的父级，就以浏览器窗口为参照进行定位

绝对定位居中

标准流盒子居中margin：0 auto；绝对定位的盒子不能使用左右margin auto居中

水平居中；left:50%，整个盒子移动到浏览器中间偏右的位置；magin-left把盒子向左侧移动：移动自己宽度的一半

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=+, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            position: absolute;
            /* margin:0 auto */
            left:50%;
​
            margin-left:-150px;
​
            width:300px;
            height:300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=+, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            position: absolute;
            /* margin:0 auto */
            left:50%;
            margin-left:-150px;
​
            top:50%;
            margin-top:-150px;
​
​
            width:300px;
            height:300px;
            background-color: pink;
​
            
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

水平垂直都居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=+, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            position: absolute;
            left:50%;
    
            top:50%;
            transform:translate(-50%,-50%);
​
​
            width:303px;
            height:300px;
            background-color: pink;
​
            
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
固定定位

滚动网页位置不受影响

相对于浏览器进行定位移动

position:fixed;

pof

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            position: fixed;
            left:0;
            top:0;
​
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <div class="box"></div>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
​
</body>
</html>

特点：

1.脱离标准流，不占位置

2.改变位置参考浏览器窗口

3.具备行内块特点

元素的层级关系 ，。

默认情况下，定位的盒子，后来者居上

装饰

基线：浏览器文字类型元素排版中存在用于对齐的基线

垂直对齐方式

属性名：vertical-align

属性值：

属性值效果
baseline默认，基线对齐
top顶部对齐
middle中部对齐 吧
bottom底部对齐

浏览器把行内和行内块标签当做文字处理，默认基线对齐；浏览器在处理行内标签和行内块标签时默认按照文字解析

光标类型

场景：设置鼠标光标在元素上时显示的样式

属性名：cursor

常见属性值：

属性值效果
default默认值，通常是箭头
pointer小手效果，提示用户可以点击
text工字型，提示用户可以选择文字，表示可以复制
move十字光标，提示用户可以移动
边框圆角

取值：半径px

边框圆角的常见应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            width: 200px;
            height: 200px;
            background-color: pink;
​
            border-radius: 100px;
            /*border-radius: 50%;*/
        }
    </style>
</head>
<body>
    <div class="one"></div>
</body>
</html>

overflow溢出部分显示效果

元素本身隐藏

场景：让某元素本身在屏幕中不可见。

常见属性：

visibility: hidden

display: none ----- 不占位的隐藏

元素整体透明度

场景：让某元素整体（包括内容）一起变透明

属性名：opacity

属性值：0~1的数字

1：完全不透明

0：完全透明

0.5: 半透明

项目样式补充

盒子阴影

过渡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 过渡配合hover使用，谁变化谁加过渡属性 */
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 宽度200，悬停的时候宽度600，花费1秒钟 */
            /* transition: width 1s , background-color 2s; */
            transition: all 1s;
            /* 如果变化的属性多，直接写all，表示所有 */
        }
​
        .box:hover{
            width: 600px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

Web前端开发简介 | 白月黑羽

生椰拿铁You
关注
一篇文章，带你详细了解CSS基础知识
PICACHU+++的博客
10-25 3645
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1] CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 [2]
CSS入门教程
打代码是一天，不打代码也是一天
04-04 3254
CSS，层叠样式表（Cascading Style Sheet），给网页中的HTML标签设置样式CSS写在一个单独的文件中，通过link标签在网页中引入 2.2.2 内部样式 CSS写在网页的head标签中，用style标签包裹 2.2.3 行内样式 CSS写在标签的style属性中 三种CSS样式引入方式的区别选择器，就是选取（查找）需要设置样式元素的方式 2.3.1 元素选择器 通过元素名称，选取（查找）相同元素，然后对相同元素设置CSS样式 小结：1、无论嵌套多少层，只要元素名称相同都会被找到通过类
【CSS学习第二篇】
最新发布
2301_77399671的博客
07-20 973
CSS学习第二篇
css博客
wang2385205187的博客
07-11 230
CSS总结 目录CSS总结一 CSS概念1.1 CSS语法二 CSS引入方式2.1 行内样式2.2 内部样式2.3 外部样式三 CSS选择器3.1 基本选择器3.2 组合选择器3.4 分组四 CSS属性相关4.1 基本属性4.2 字体属性4.3 文本颜色4.4 文字属性4.5 背景属性4.6 边框4.7 display属性4.8 CSS盒子模型4.9 定位(position)一 CSS概念1.1 CSS语法CSS引入方式2.1 行内样式2.2 内部样式2.3 外部样式三 CSS选择器3.1.1 标签
品优购css静态网页制作 博客1
qq_53101767的博客
09-27 327
这篇博客主要是记录在跟随b站pink老师学习前端的一些过程，便于以后复习一些惯用的html还有css基础样式。 文章目录快捷导航栏制作首页头部制作logo部分搜索模块购物车模块nav模块制作 快捷导航栏制作 快捷导航栏置于一个section中 <section class="shortcut"> <section/> .shortcut{ height: 31px; background: color #f1f1f1;; line-height: 31px;
前端css加载特效32个.rar
04-05
本资源"前端css加载特效32个.rar"正是一个专门针对CSS3加载特效的集合，包含了32种不同的页面过渡和加载动画，对于前端开发者尤其是初学者来说，是一个极好的学习和参考素材。 1. CSS3 动画基础：CSS3的`@keyframes...
前端css样式分类汇总
08-12
前端基础，css样式分类汇总，有条理的学习css各类属性，可以大大提升网页开发的工作效率。适合初学者
前端CSS3基础教程，前端必备基础相关代码资源
07-11
【标题】中的“前端CSS3基础教程”表明本资源主要关注的是前端开发中CSS3的相关技术，CSS3是层叠样式表的第三版，它带来了许多新的特性和改进，包括但不限于选择器、动画、过渡、变换、阴影效果、边框和背景等。...
前端css核心笔记
04-15
网页前端的css笔记，对于java程序员，前端也要学习一下，所以html,css必不可少
html web前端css基础(7)
01-08
html web前端css基础(7) CSS选择器 作用:规范了页面有哪些元素能够使用声明好的样式。 目的：为了匹配页面的元素。 选择器详情: 元素选择器 特点: 由标记名称作为选择器。主要匹配页面中指定的标记所对应的所有元素...
国内博客系统css精美模板（超大全套、完美）
03-25
页面超全，登陆注册，个人中心（个人设置、空间模板、消息处理等），系统后台管理，个人主页，相册，日志（查看日志列表、日志细节、日志发布、日志编辑），好友，收藏，个人信息，网站门户页面 基本上建设网站需要的页面都有了。 之前需要做一个博客系统，苦于没有像样点的模板，就只能自己辛苦的整一个了，在这里给大家分享分享，下载了绝对物超所值！
博客css模板
06-13
现在的个人空间都比较流行，作为非计算机专业的童鞋们来说自已做个博客是件多少难的事情，好不容易做出来一个博客却又不够美观。这款简洁的博客css模板就能帮助到大家哦，用Dreamweaver打开后将需要更改的文件改掉就成了自已的个个空间咯。有兴趣的话还可以看看里面的源代码，学习下网页制作。
个人博客html+css+JavaScript完整代码
05-23
个人博客，基于html+css+JavaScript的完整代码，内容全面可以直接使用。
CSS看这一篇就够啦，CSS基础大全，可用于快速回顾知识，面试首选
热门推荐
a2868221132的博客
03-11 2万+
CSS看这一篇就够啦，CSS基础大全，可用于快速回顾知识，面试首选
CSS——CSS基础知识
流楚丶格念的博客
06-26 8074
文章目录CSS的发展历程CSS 网页的美容师CSS初识引入CSS样式表（书写位置）内部样式表行内式（内联样式）外部样式表（外链式）三种样式表总结（位置）CSS样式规则外链案例内链案例 CSS的发展历程 从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生
一篇博客带你学会CSS（前后端必会、三万字笔记）
Cosmoshhhyyy的博客
04-10 1358
用一篇博客带你学会CSS，里面包含大量的样例和展示效果，各种动图让你更好的理解。三万字的笔记，让你全方位细致学会。
超详细的学习笔记：CSS基础（附代码示例）
lbcbjtlhmjq的博客
06-30 2931
CSS入门容易，精通难。因为CSS的属性很多，一个一个去学去记根本不可能，我们要善于借助网络工具。关于HTML和CSS的学习资源，网上的在线教程、速查宝典就有一大推。所以只要了解HTML和CSS标签及属性的基本用法，再借助于在线文档，基本上HTML和CSS的学习就不会有太大问题。但是要提醒大家的是，不要完全依赖于在线文档。最基本的一些属性（比如字体样式、文本样式等）还是需要掌握并且熟练使用，我写这篇博客就是为了让大家更好地熟悉并运用CSS的常见属性。
前端---CSS篇（详解CSS）
stu_kk的博客
11-28 1017
css学习笔记分享
Web前端CSS基础样式详解与实践
在Web前端开发中，CSS（层叠样式表）基础知识对于构建美观、功能丰富的网页至关重要。本文将带你深入理解CSS的基础样式，包括颜色的表示法、单位的选择、文本样式控制以及字体设置。 1. 颜色的表示： - CSS允许...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值