一：CSS概述
1.什么是css
Cascading style sheets 层叠样式表，级联样式表，简称样式表
2.作用
设置html网页中元素的样式，美化页面
3.HTML与CSS的关系
HTML：负责搭建网页，展示内容
CSS：负责美化页面，样式构建
4.HTML与CSS的属性，使用原则
W3C规定我们尽量使用css的方式来取代HTML属性
css优势：（1）样式代码可以高度重用，（2）样式代码可维护性高
二：CSS的语法规则
1.使用css的方式
内联，内部，外部
|
1.内联样式行内样式 (默认优先级最高) 在元素的style属性中。声明样式（所有元素都有style属性） <any style="样式声明"></any> any任何元素 样式声明：样式属性:样式值; 样式属性:样式值; 属性和值之间用 : 连接，多个样式之间用 ; 连接 内联样式在项目中很少使用
| |
|
2.内部样式 在网页头部（head标签—）中，写一对style标签，在style中定义所有样式 <style >选择器{样式属性:样式值;样式属性:样式值;....... } </style>选择器{样式声明} 选择器：就是一个条件，符合这个条件的元素，使用这个样式 项目中很少使用，在学习和测试中使用 内部样式的重用，只能在当前页面内重用 | |
|
3.外部样式 单独创建一个.css文件，编写样式 在html页面head标签中，用 link 引入样式文件 <link rel="stylesheet" href="css的url"> Tips：rel必须写，不然无效 外部样式在项目中广泛应用，是使用最大的方式 |
2.CSS的特性
继承性，层叠性，样式优先级
|
1.继承性 大部分的css效果可以被子元素继承，必须是父子结构，子承父（a标签不继承） |
|
2.层叠性 可以为一个元素定义多个样式规则， 样式规则中的样式属性不冲突时，可以同时应用在这个元素上 |
|
3.样式的优先级 样式声明冲突时，按照样式规则的优先级去应用， 默认优先级：从高到低、 高：内联样式 中：内部样式和外部样式，遵循就近原则 低：浏览器默认样式 |
|
4.调整优先级 !important 规则 放在属性值后面，与值之间使用空格隔开， （内联样式中不可以使用!important） 作用：调整样式优先级，优先级提升 多个样式都有 !important样式，按照就近原则 |
三：基础选择器 （***重点***）
1.选择器的作用
规范了页面中哪些元素能够使用定义好的样式，
2.选择器详解
|
① 通用选择器 *{ 样式声明 } *的效率低，很少使用通用选择权器， *{ margin:0;padding:0} 所有元素内外边距清零 唯一使用的场合 | ||||||||||||||
|
② 元素选择器（标签选择器） 页面中所有对应的元素都应用这个样式 作用：设置页面中某种元素的默认样式 元素名称 { 样式声明 } div{ } | ||||||||||||||
|
③ ID选择器，专属定制 <any id="id值"></any> #id{ 样式声明 } 通常会作为子代选择器或者后代选择器的一部分 | ||||||||||||||
|
④ 类选择器 <any class="类名"></any> .类名{ 样式 } 作用：定义页面上某个或某类元素的样式（公共样式），class属性来引用类名 类名规则： 1.类名之前的点不能省略，引用的时候没有点 2.类名不能以数字开头 3.类名只能包含 - _ 符号 4.类名尽量的见名知意 类选择器的特殊用法： 1.多类选择器 <p class="font-24 text-red bg-yellow"> 让元素引用多个类名，这些类的样式都会作用到当前元素上 2.分类选择器 元素选择器+类选择器{} ，类选择器+类选择器{}
作用：更精确的确定使用样式的元素，增加选择器的权值 | ||||||||||||||
|
⑤ 群组选择器 将多个选择器使用逗号分隔开，放在一起，定义一组公共样式 语法： 选择器1,选择器2,选择器3{ 公共样式声明} div,p,#s1,.d2{ color:red;} | ||||||||||||||
|
⑥ 后代选择器 通过元素的后代关系匹配元素 后代：一级嵌套或者多级嵌套 语法：选择器1 选择器2 选择器3....{ ****} | ||||||||||||||
|
⑦ 子代选择器 通过元素的子代关系匹配元素 子代：一级嵌套，直接的儿子 语法：选择器1>选择器2>选择器3>...{ **** } 后代子代可以混写 | ||||||||||||||
|
⑧ 伪类选择器 匹配元素在不同状态下的不同样式 1.链接伪类 a标签没有访问的状态 :link{} 匹配元素尚未访问时的状态 :visited{} 匹配元素访问过后的状态 2.动态伪类 :hover 鼠标悬停在元素上的样式 :active 匹配元素被激活时的状态（激活：鼠标点住不放） :focus 匹配元素获取焦点是的状态 Tips：伪类元素作用在同一个元素上时，必须按照一定的顺序编写，否者冲突 爱恨原则：love hate | ||||||||||||||
|
⑨ 选择器的权值 权值：标识当前选择器的重要程度，权值越大，优先级越高
权值特点： 2.权值相同，使用就近原则 3.群组选择器的权值单独计算，不能相加 4.样式后面加!important 直接获取最高权优先级（内联样式不能加!important） 5.选择器权值的计算结果不会超过自己的最大数量级（1000个1相加也不会大于10） |
四：尺寸和边框
1.尺寸和属性
|
作用：设置元素的宽高
使用场合：响应式布局 取值：以px为单位的数字，父元素尺寸的% 百分比 |
附加知识点：单位
|
尺寸的单位：
|
2.页面中允许设置尺寸的元素
① 块级元素
|
所有的块级元素都可以设置尺寸 块级元素不设置宽：宽度占父元素100% 块级元素不设置高：高度靠内容撑开，没有内容，就没有高 |
② 行内元素
|
行内元素设置宽高无效，行内元素的宽高是靠内容撑开的， 但是自带宽高属性的行内元素可以设置尺寸（img，table） |
③ table
|
table 自带宽高属性，可以设置宽高 |
④行内块
|
input 行内块可以设置宽高 |
3.溢出处理
|
当内容较大时，元素区域较小，就会发送溢出效果 默认是纵向溢出 属性：overflow 取值： 1. visible 默认值，溢出部分可见 2. hidden 溢出部分隐藏 3. scroll 不管是否溢出，都添加滚动条，不溢出时，滚动条不能拖动 4. auto 自动，溢出的时候，溢出的方向有滚动条，不溢出没有滚动条 控制滚动条的方向： overflow-x / overflow-y overflow-x:scroll 如何让内容横向溢出： 需要在宽度比较小的容器内部，添加一个宽度较大的元素盛放内容， 在父容器上写overflow:auto 就可以横向溢出 |
附加知识点：颜色
|
合法颜色值 1.颜色的英文单词（red,blue,yellow,pink,purple,gray） 2.#rrggbb #000000(黑) #ffffff（白）#ff0000（红）#00ff00（绿） #0000ff(蓝) 3.#aabbcc ----->#abc #000 #fff #f00 #0f0 # 00f #666 4.rgb(0~255,0~255,0~255) rgb(255,0,0) rgb(0,255,0) rgb(0,0,255) 5.rgba(r,g,b,alpha) alpha 透明度 0~1 1不透明，0透明 grba(255,0,0,0.5) |
4.边框
①边框属性 ----简写方式--4个方向边框一起设置
|
border: width style color ; width:边框的宽度，取值以px为单位的数字 style：边框的样式， 取值
color：边框的颜色，合法的颜色值/ transparent（透明） 最简方式：border：style； 取消边框：border：0； 或者 border：none； |
②单边定义边框
|
只设置某一条边的3个属性 border-top:width style color; border-right/bottom/left |
③单属性定义
|
border-width: 3px; border-style: solid; border:color; red; |
④单边单属性
|
width |
style |
color |
|
border-top-width: |
border-top-style: |
border-top-color: |
|
border-right-width: |
border- right -style: |
border-right-color: |
|
border-bottom-width: |
border- bottom -style: |
border- bottom-color: |
|
border- left -width: |
border- left -style: |
border-left-color: |
5.边框的倒角（圆角）
|
将直角设置成倒角，圆角 border-radius: 取值：以px为单位的数字 % 50% 是圆 单角设置 border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius |
6.边框阴影
|
border-shadow: 取值：h-shadow v-shadow blur spread color insert h-shadow:水平方向的阴影偏移量 +：往右移动 -：往左移动 v-shadow：垂直方向的阴影偏移量 +：往下 -：往上 blur：阴影模糊距离，越大越模糊 无负值 spread：阴影尺寸，在基础阴影上扩出来的大小 负值，尺寸变小 color：阴影颜色 inset：向内扩散阴影 |
7.轮廓
|
轮廓指边框的边框，绘制于边框外的线条 outline:width style color; 去除轮廓：outline:none; 或者 outline:0 |
五：框模型 ----盒子模型
框模型：元素在页面上实际占地空间的计算方式
默认情况，一个元素在页面上实际占地宽度：
左外边距+左边框宽度+左内边距+内容区域宽度+右内边距+右边框+右外边距
实际占地高度
上外边距+上边框宽度+上边距+内容区域高度+下内边距+下边框+下外边距
1.外边距：margin
元素边框以外的距离，改变margin，元素右位移效果
|
margin: v1; 设置4个方向的外边距 margin:v1 v2; 设置v1 上下 v2 左右的外边距 margin:0 auto; 块级元素水平居中 auto; 对垂直外边距无效 margin:auto; auto 只对设置了宽的块级元素生效 margin:v1 v2 v3; 设置 v1上 v2左右 v3下 margin: v1 v2 v3 v4;设置 上 右 下 左 （逆时针）
单方向外边距： margin-top: 上 margin-right: 右 margin-bottom: 下 margin-left:左 取值：1. 以px为单位的数字 2. % 3. + margin-top ↓ margin-left → - margin-top ↑ margin-left ← 4. auto 自动计算块级元素外边框，让块级元素水平居中， auto 只对设置了宽的块级元素生效，对上下外边距无效 |
2.外边距的特殊效果
① 外边距合并
两个垂直外边距相遇时，他们将合成一个，以最大值为准
②块级元素，行内元素，行内块的总结
|
行内元素 |
设置宽高无效，宽高根据内容自动撑开。上下垂直外边距无效，可以于与其它行内元素或者行内块共用一行 |
|
块级元素 |
设置宽高有效，如果不设置宽，宽度是父级元素的100%。如果不设置高，高度按照内容自动撑开。上下外边距有效，独占一行 |
|
行内块 input(单选多选除外） |
，设置宽高有效，不设置宽高，自带一个默认的宽高。上下外边距有效，但是同一行修改一个行内块的垂直外边距，整行都会一起改变位置，可以与其他行内元素和行内块共用一行 |
3.自带外边距的元素
body,h1~h6,p, ol,dl,pre,
由于不同浏览器对默认的外边距解析可能产生差别，
所以一般情况下，开发之前需要把内外边距清空 （margin:0;padding:0）
或者通过群组选择器来写：blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,
p,pre,td,textarea,th,ul{margin:0;padding:0}
4.外边距溢出
在特殊情况下，为子元素设置外边距，会作用到父元素上
|
特殊情况 |
1.父元素没有上边框， 2.子元素内容区域上边与父元素内容区域上边重合的时候（为父元素中第一个子元素设置上边距时，这种说法不严谨） |
|
解决方案 |
1.给父元素添加上边框，弊端：影响父元素实际占地高度 2.给父元素添加上内边距，弊端：影响父元素实际占地高度 3.给父亲的一个子元素的位置添加空table元素 |
5.内边距
内边距的改变效果，感觉是改变了元素的大小，不会影响其他元素，
但是真正改变的是本元素的占地尺寸，内边距颜色和元素背景相同
|
语法： padding:v1; 设置4个方向的内边距 padding:v1 v2; 上下 左右 padding无auto padding:v1 v2 v3; 上 左右 下 padding:v1 v2 v3 v4;上右下左 单方向设置： padding-top padding-right padding-bottom padding-left 取值：以px为单位的数字 % padding无auto属性值 |
6.box-sizing属性（设置元素实际占地尺寸的公式）
|
box-sizing: 取值： 1.content-box:默认值，按照之前的盒子模型计算元素占地大小（左外+左边+左内+内容区域宽度+右内+右边+右外） 2.border-box 设置width和heighs是包含border+padidng+内容区域 整体宽度 元素实际占地大小：左外+设置的width+右外 上外+设置的height+下外 给复杂元素关系做布局实，经常使用border-box |
六：背景
1.背景颜色
|
background-color;合法颜色值 |
2.背景图片
|
background-image：url( url地址) 使用背景图片可以让该元素的子元素，堆叠显示在背景图片上 而使用img标签，默认不会有堆叠效果 |
3.背景图片的平铺
|
background-repeat： 取值：
|
4.背景图片的定位
|
background-position： 取值：
|
5.背景图片的尺寸
|
background-size: 取值：
|
6.背景图片的固定
|
background-attachment: 取值： scroll 默认值，背景图片会随着窗口滚动条滚动 fixed 固定 ，背景图片相对于窗口固定，窗口滚动时，背景图位置不变，但是只会在原容器内显示 |
7.背景的简写方式
|
background: color image repeat attachment position 最精简方式：backgrounbd:color/image |
七：渐变
1.什么是渐变
渐变是指多种颜色，平缓变化的一种显示效果
2.渐变的主要因素
色标：一种颜色，以及这种颜色出现的位置
一个渐变，最少两个色标
3.渐变的分类
①线性渐变：以直线的方式来填充渐变色
②径向渐变：以圆形的方式来填充渐变色
③重复渐变：将线性，径向渐变重复几次显示
4.线性渐变
|
background: linear-gradient(angle,color-point1,color-point2.....); angle:表示渐变的方向 取值：
color-point：色标 颜色 %/px |
5.径向渐变
|
background:radial-gradient( 半径 at 圆心 x 圆心 y，color-point，color-point2...)
|
6.重复渐变
|
重复的线性渐变 background：repeating -linear-gradient(to left ,#000 0px.#ff0 25px ,#000 50px) |
|
重复的径向渐变 background: repeating-radial-gradient(50px at center center, #000 0%,#0ff 25%,#000 50%); |
7.浏览器兼容性问题
|
低版本（IE8.0以下），使用渐变，要在低版本兼容渐变，需要在linear-gradient之前添加浏览器内核
eg: background: -webkit-linear-gradient() 兼容低版本浏览器，线性渐变的方向，要改变写法，不写to top/to left 等 改成初始点：top/right/bottom/left |
一个页面中，编写css的思路
|
从上往下，从左往右，从外往里 1.尺寸，大体位置 2.边框，背景相关 3.文本相关 4.微调 |
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
