本文详细介绍了CSS的引入方式、基础选择器、字体和文本样式、Chrome调试工具的使用，以及进阶的CSS选择器、背景相关属性、元素显示模式等。还探讨了CSS的定位原理和浮动，讲解了结构伪类选择器、伪元素选择器、盒子模型等，旨在帮助读者深入理解并掌握CSS的使用。
CSS
css（层叠样式表）
如果给同一个标签设置了相同的样式，此时样式会层叠（覆盖），写在最下面的会生效
作用：给页面中的HTML标签设置样式
css写在style标签中，style标签一般写在head标签里面，titel标签下面
css引入方式
-
内嵌式：CSS写在style标签中
style标签虽然可以写在页面任意位置，但是通常约定写在head标签中
-
外联式：CSS写在一个单独的.css文件中
需要通过link标签在网页中引入
-
行内式：CSS写在标签的style属性中
配合JS使用
基础选择器
-
标签选择器：通过标签名，找到页面中所有这类标签，设置样式（如p{}）
-
类选择器：通过类名，知道页面中所有带有这个类型的标签，设置样式
给标签设置一个类名（如<p class="one">,class是属性名，引号中加类名）
如（.one{}）
类名可以由数字，下划线，中划线，字母组成，但不能以数字或者中划线开头
一个标签可以使用多个类名，类名之间用空格隔开（如：<p class="one size">）
-
id选择器：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
#id属性值{css属性名：属性值；}
id属性在一个页面中是唯一的，不能重复（一个标签上只能有一个id属性值，一个id选择器只能选中一个标签）
-
通配符选择器：找到页面中所有的标签，设置样式
*{css属性名：属性值；}
字体和文本样式
-
字体样式
属性名 取值 注意点 font-size（大小） 数字+px 谷歌默认文字大小是16px font-weight（粗细） 关键字或数字 正常：normal，400。加粗：bold，700 font-style（倾斜） 正常：normal，倾斜：italic font-family（字体） 直接输入需要的字体 windows默认微软雅黑，mac默认苹方。 font-family:微软雅黑，黑体，sans-serif;意为如果用户电脑没有微软雅黑字体，就用黑体，如果没有黑体，就用sans-serif（非衬线字体系列）
简写：font： style weight size 字体；（如：font: italic 700 20px 楷体;）如果想修改单个属性，在下面重写单个属性
可以省略前两个，但是必须按照顺序填写。
复合属性：一个属性符号后面书写多个值的写法
-
文本样式：
属性名 取值 注意点 text-indent （文本缩进） 数字+px，数字+em （1em=当前标签的font-size的大小） text-align （文本水平对齐方式） left：左对齐 center：居中对齐 right：右对齐 可以让span，a，文本，input，img标签居中，需要在body（父元素）设置 text-decoration（文本修饰） underline：下划线 line-through：删除线 overline：上划线 none：无装饰线 line-height（行高） 数字+px 倍数（当前标签font-size的倍数） font：style weight size/line-height family；
chrome调试工具
-
在网页中鼠标右键，检查
-
f12或fn+f12
显示删除线的是因为被覆盖了或者注释，显示黄叹号的是因为语法错了
拓展
-
颜色常见取值：了解
如：文字颜色：color
背景颜色：background-color
属性值：
颜色表示方式 表示含义 属性值 关键词 预定义的颜色名 red，green，blue，yellow等 rgb表示法 红绿蓝三原色，没想取值范围0~255 rgb（0,0,0),rgb(255,255,255),rgb(255,0,0) rgba表示法 红绿蓝三原色+a表示透明度，取值范围是0~1 rgba（255,255,255,0.5） 十六进制表示法 #开头，将数字转换成十六进制表示 #000000，#ff0000，#e92322，简写：#000，#f00
-
背景颜色线性渐变
background-image：linear-gradient（ to 起始方向，颜色1，颜色2）
如：background-image：linear-gradient（ to left，blue，red）
可以跟多种颜色，颜色后可以跟像素单位，表示0-x像素都是一种颜色
径向渐变：
background-image：radial-gradient（颜色1，颜色2）
从中间向四周扩散
-
标签水平居中方法总结：margin：0 auto
如果需要让div，p，h水平居中可以通过margin： 0 auto实现
CSS进阶
选择器进阶
复合选择器：
-
后代选择器：空格
选择器语法：选择器1（父选择器） （空格）选择器2（后代选择器）{css}
-
子代选择器：>
选择器语法：选择器1>选择器2{css}
-
并集选择器：,
选择器语法：选择器1，选择器2{css}
-
交集选择器：
<p class="P">zhehsi P</p> <p>PPPPPPPPPP</p> <div class="P">DIV</div>
选择器语法：选择器1选择器2（直接连写，如p.P）
-
伪类选择器: hover
选中鼠标悬停在元素上的状态，设置样式
选择器语法：选择器：hover{css}
任何标签都可以添加伪类
link
选择所有未访问过的链接
visited
选择所有已访问过的链接
active
鼠标摁下还没抬起的时候
顺序：link visited hover active
focus
用于选取获得焦点的表单元素（把获得光标的表单元素选取出来）
语法：input：focus
背景相关属性
-
背景颜色
属性名：background-color（bgc）
属性值：关键字，rgb表示法，rgba表示法，十六进制
背景颜色默认值是透明
-
背景图片
属性名：background-image（bgi）
属性值：bgi：url（图片的路径）；
-
背景平铺
属性名：background-repeat（bgr）
属性值：
取值 效果 repeat （默认值）水平和垂直方向都平铺 no-repeat 不平铺 repeat-x 沿着水平方向（x轴）平铺 repeat-y 沿着垂直方向（y轴）平铺 -
背景位置：
属性名：background-position（bgp）
属性值：bgp：水平方向位置 垂直方向位置；
水平方向：left，center，right（也可以写数字+px）
垂直方向：top，center，bottom
-
背景图片固定：
属性名：background-attachment
可以设置背景图像是否固定或者随着页面的其余部分滚动
-
背景相关属性连写：
属性名：background（bg）
顺序：bg：color image repeat position 不分先后顺序
元素显示模式
-
块级元素：
显示特点：1.独占一行（一行只能显示一个）。2.宽度默认是父元素的宽度，高度默认由内容撑开。3.可以设置宽高。
-
行内元素：
显示特点：1.一行可以显示多个。2.宽度和高度默认由内容撑开。3.不可以设置宽高
-
行内块元素：
显示特点：1.一行内可以显示多个。2.可以设置宽高。
-
元素显示模式切换：
语法：
属性 效果 display：block 转换成块级元素 display：inline-block 转换成行内块元素 display：inline 转换成行内元素
-
拓展：
1.块级元素一般作为大容器，可以嵌套：文本，块级元素，行内元素，行内块元素等。但是：p标签不要嵌套div，p，h等块级元素，a标签内部可以嵌套任意元素，但不能嵌套a元素。
vscode：shift+alt+鼠标左键 可以多选
CSS特性
-
继承性
特性：子元素有默认继承父元素样式的特点。文字控制属性都可以继承（控制文字的属性都能继承，不是控制文字的都不能继承）。
-
层叠性
-
优先级
！important>行内样式>id选择器>类选择器>标签选择器>通配符选择器>继承
div{ color:red !important; }可添加！important将优先级调为最高，但是不要给继承的添加，自己有样式无法继承父级样式
权重叠加计算：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终那个选择器优先级最高会生效
权重叠加计算公式：
（0，0，0，0）从左到右依次是第一级到第四级。行内样式的个数，id选择器个数，类选择器个数，标签选择器个数
Chrome调试工具
css上一行出错，下一行会受到影响
PxCook的基本使用
png类型的图，就用设计
psd类型的图，就用开发
盒子模型
概念：1. 页面的每一个标签，都可看作是一个盒子，通过盒子的视角更方便的进行布局
2.浏览器在渲染网页时，会将网页中的元素看做是一个个的矩形区域，我们也称之为盒子
组成：
-
内容区域的宽度和高度
属性：width，height 常见取值：数字+px
-
边框（border）
属性：border
复合属性 如：border：1px solid #000；（粗细 线条的种类 颜色 不分先后顺序）
solid：实线，dashed：虚线，dotted：点线
快捷键：bd+tab
只给盒子的某个方向设置边框，就使用border-方位名词（如border-bottom）
border-collapse（合并相邻的边框） -
内边距（padding）
复合属性（如padding：10px 20px 30px 40px;）顺时针，上右下左
如果后面跟了三个值就是上右下，左跟右同值。如果取了两个值就是上右，下和上同值，左和右同值
-
外边距（margin）
和内边距一样
-
如何消除默认的内外边距
*{ margin:0; padding:0; }-
垂直布局的margin，上下会合并，两个距离为margin最大值
-
互相嵌套的块级元素，子元素的margin-top会作用在父元素上（给父元素设置overflow：hidden）
-
无法通过margin或padding改变行内标签的垂直位置（可以添加行高或者转换显示模式）
-
去除掉列表的符号 ：list-style: none;
CSS浮动
结构伪类选择器
作用：根据元素在HTML中的结构关系查找元素
n中可以填公式：偶数：2n，奇数：2n+1.2n-1.odd，找到前五个：-n+5，找到从第五个往后：n+5（n为0.1.2.3.4....）
伪元素选择器
一般页面中的非主题内容可以使用伪元素
| 伪元素 | 作用 |
|---|---|
| ：：before | 在父元素内容的最前添加一个伪元素 |
| ：：after | 在父元素内容的最后添加一个伪元素 |
-
必须设置content属性才能生效
-
写在css里
-
默认是行内标签
-
权重为1
标准流
又称文档流，是浏览器在渲染显示网页内容是默认采用的一套排版原则，规定了应该以何种方式排列元素（标签的默认排列方式）
浮动
-
作用：网页布局，图文环绕
浏览器内解析行内块或者行内标签的时候，如果标签换行书写，会产生一个空格的距离
-
特点：
-
浮动元素会脱离标准流的控制，在标准流中不占位置
-
浮动元素比标准流高半个级别，可以覆盖标准流中的元素
-
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
-
浮动元素有特殊的显示效果：一行可以显示多个，可以设置宽高（具备行内块特点）
-
-
属性：float：left float：right
-
清除浮动：清除浮动给别的标签带来的影响
-
：在父元素内容的最后添加一个块级元素clear：both
-
单伪元素清除法：
.clearfix::after{ content:""; display:block; clear:both 为了兼容性 height：0 visibility:hidden; } -
双伪元素清除法：给父级设置一个class=clearfix
.clearfix::before, .clearfix::after{ content: ""; display: table; } .clearfix::after{ clear: both; } 还可以解决塌陷问题
CSS定位
定位的基本介绍
可以让元素自由的摆放在网页的任意位置，一般用于盒子的层叠现象 定位之后的层级最高，可以层叠在其他盒子上 可以让盒子始终定位在屏幕中的某个位置
定位的基本使用
使用定位的步骤：
-
设置定位方式：
属性名：position
常见属性值：
定位方式 属性值 静态定位 static 相对定位 relative 绝对定位 absolute 固定定位 fixed 写法：
相对定位（相对于自己之前的位置进行移动）：
position：relative; left:100px; top:200px; 如果四个方向全都写上，水平会生效left，垂直会生效top 不脱标，占有原来位置 具备标签原有的显示模式
绝对定位（相对于非静态定位的父元素进行定位移动）：
position：absolute; 先找已经定位的父级，以这个父级为参照物进行定位； 有父级，但是父级没定位，以浏览器窗口（body）为参照物进行定位 脱标，不占位置 改变标签的显示模式特点：行内块 绝对定位的盒子不能使用margin：0 auto；来实现居中
固定定位（相对于浏览器进行定位移动）：
position：fixed; 脱标，不占位置 具备行内块特点 固定的盒子要有宽度
-
设定偏移值
偏移值设定两个方向，水平和垂直方向各选一个使用即可
方向 属性名 属性值 含义 水平 left 数字+px 距离左边的距离 水平 right 数字+px 距离右边的距离 垂直 top 数字+px 距离上边的距离 垂直 bottom 数字+px 距离下边的距离 拓展：
transform：translate（-50%，-50%）：
位移：自己宽度高度的一半
元素的层级关系：
标准流<浮动<定位
默认情况下，定位的盒子，后来者居上，
z-index：整数；取值越大，显示顺序越靠上，默认值为0，必须配合定位使用
装饰
-
垂直对齐方式：
基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）
属性名：vertical-align
属性值 效果 baseline 默认，基线对齐 top 顶部对齐 middle 中部对齐 bottom 底部对齐 浏览器遇到行内，行内块标签会当做文字处理，默认文字是按照基线对齐
图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐
解决方法：1. 给图片设置一个不是基线对齐的方式
2.把图片转换成块级元素 -
光标类型：
设置鼠标光标在元素上的显示模式
属性名：cursor
属性值 效果 default 默认值，通常是箭头 pointer 小手效果，提示用户可点击 text 工字型，提示用户可以选择文字 move
not-allowed
十字光标，提示用户可以移动
禁止
-
边框圆角：
border-radius
取值：数字+px，百分比
最多可以赋四个值，从左上角顺时针
正圆：border-radius：50%，盒子必须是正方形
胶囊状：border-radius：取值为高度的一半，盒子必须是长方形
-
overflow溢出部分显示效果：
属性值：overflow
属性值 效果 visible 默认值，溢出部分可见 hidden 溢出部分隐藏 scroll 无论是否溢出，都显示滚动条 auto 根据是否溢出，自动显示或隐藏滚动条 -
元素本身隐藏：让某元素本身在屏幕中不可见
常见属性：
visibility：hidden 占位隐藏
visibility：visible 元素可视display：none 不占位
display：block 元素可视
-
元素整体透明度：
属性：opacity
属性值：0~1之间的数字
1：表示完全不透明
0：表示完全透明
CSS书写顺序
浏览器执行效率会更高
-
浮动，display
-
盒子模型：margin border padding 宽度高度背景色
-
文字样式
项目样式补充
-
精灵图
一般精灵图的标签都用行内标签（span，b，i）
项目中将多张小图片，合并成一张大图片，这张大图片便称之为精灵图
优点：减少服务器发送次数，减轻服务器压力，提高页面加载速度
使用步骤：
-
创建一个盒子，设置盒子的尺寸和小图尺寸相同
-
讲精灵图设置为盒子的背景图片
-
修改背景图位置
-
-
-
css三角
用css画一个三角形，设置一个盒子，给盒子宽高设置为0，加边框线颜色为透明，想要那个方向的三角，就给那个方向设置边框颜色 -
字体图标：简单的小图标可以使用字体图标
1. 下载字体图标：icomoon字库 icomoon.io
阿里iconfont字库 iconfont.cn
2. 将下载好的文件解压，将fonts文件放到html同一个目录下
3. 在css引入字体声明
4. 在需要使用的标签css中声明字体 -
背景图片大小：
属性值：background-size：宽度 高度；
取值 场景 数字+px 简单方便，常用 百分比 相对于当前盒子自身的宽高百分比 contain 包含，将背景图片等比缩放，直到不会超出盒子的最大 cover 覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白 background连写拓展：background： color image repeat pasition/size
-
盒子阴影：
属性名：box-shadow
取值：
参数 作用 h-shadow 必须，水平偏移量，允许负值 v-shadow 必须，垂直偏移量，允许负值 blur 可选，模糊度 spread 可选，阴影扩大 color 可选，阴影颜色 inset 可选，将阴影改为内部阴影 -
过渡：
让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
属性名：transition
参数 取值 过渡的属性 all：所有能过渡的属性都过渡 过渡的时长 数字+s（秒） 
如果想让两个属性变化，需要用，隔开
如果想让多个属性过度，只需要写all
-
SEO三大标签（搜索引擎优化）：
作用：让网站在搜索引擎上的排名靠前
提升SEO的常见方法：
-
竞价排名
-
将网页制作成html后缀
-
标签语义化（在合适的地方用合适的标签）
三大标签：
-
title：网页标题标签
-
description：网页描述标签
-
keywords：网页关键词标签
<meta name="description" content=""> <meta name="keywords" content="">
-
-
显示在标签页标题左侧的小图标，习惯使用.ico格式的图标
输入link：favicon <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
8. 
扫一扫
1291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
