-
css的引入方式
-
内嵌式：将css的内容写在style标签中
-
style标签虽然可以写在页面中，但是通常约定写在head标签中
-
关系：样式表
-
<link rel="****"href=" ../css位置">
b.外联式 css写在单独的css的文件中
需要通过link标签在网页中引入
c.行内式：css写在style属性中
正常不使用，配合js使用
| 引入方式 | 书写位置 | 作用范围 | 使用场景 |
| 内嵌式 | css写在style标签中 | 单前页面 | 小案例 |
| 外联式 | css写在单独的文件中，通过link标签引入 | 多个页面 | 项目中 |
| 行内式 | css写在标签style属性中 | 当前标签 | 配合js使用 |
2.基础选择器
-
标签选择器
通过标签名，找到页面中所有这类标签，设置样式
结构：标签名{css属性名：属性值；}
注意：
-
标签选择器选择的是一类标签，而不是单独的某一个标签
-
标签选择器无论嵌套关系有多深，都能找到对应的标签
-
类选择器
结构：.类名{css属性名：属性值；}
作用：通过类名，找到页面中所有带这个类名的标签，设置样式
注意点：
-
所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
-
类名可以由数字，字母，下划线，中划线组成，但是不能以数字或者中划线开头
-
应该标签可以同时有多个类名，类名之间以空格隔开
-
类名可以重复，一个类选择器可以同时有多个标签
-
id选择器
结构：#id属性值{css属性名：属性值；}
作用：通过id属性值，找到页面中带有id属性值的标签，设置样式
注意：
-
id选择器所有标签都有id属性
-
id属性值类似于身份证号码，在页面中是唯一的，不可重复的！
-
一个标签只能有一个id属性值
-
一个id选择器只能选择一个标签
-
通配符选择器
结构：*{css属性名：属性值；}
作用：在页面中找到所有标签，设置样式
注意：
-
开发中使用极少，只有在特殊情况下才能使用到
-
在基础的小页面中可能使用到去除默认样式的标签margin和padding
字体和文本样式
-
字体样式：
-
字体大小：font-size
取值：数字+px
注意点：谷歌浏览器默认的字体大小时16px
单位需要自己设置，否则无效
-
字体粗细：font-weight
-
属性名：font-weight
-
取值
-
关键字 正常：normal 加粗 bold
-
纯数字 100-900 （浏览器中）正常400 加粗700
注意点：不是所有文字都提供九钟粗细，因此部分取值页面无法显示
实际开发中，正常，加粗两种使用最多
-
字体样式：font-stly
属性名：font-style
取值：正常（默认值）normal，倾斜 italic
-
字体类型：font属性值连写
-
属性名：font-family
-
常见取值：具体字体
-
具体字体，具体系列
注意点：如果字体名称中存在多个单词，推荐使用引号包裹
最后一项字体系列，不需要引号包裹
网页开发时，尽量使用系统常见的自带字体，保证不同用户浏览网页时正确显示
font（复合属性）：
注意点：当我们要使用多个字体样式，可以连写（属性名：属性值 属性值 属性值）
可以单独写；属性名：属性值；属性名：属性值；
样式默认会显示下面的（两个样式同时设置，会默认显示下方的样式）
文本样式：
-
1.文本缩进：text-indent
-
属性名：tetx-inden
-
取值：数字px 数字：em（推荐1em=当前标签font-size的大小）
（浏览器中，使用px 需要为1：2；推荐使用em，一个缩进为1em）
-
2.文本水平对齐：text-aligh
-
属性名：text-align（可以使文本，span标签，a标签，input标签，img标签居中）
-
取值：
属性值：left 左对齐
right 右对齐
center 居中属性
如果需要文本居中，text-align属性给文本所在标签的父元素中使用-
3.文本修饰：text-decoration
-
取值方式：
underline：下划线，line-through：删除线，
overline：上划线，none：无装饰性（超链接使用的较多）
开发中会使用超链接text-decoration：none；清楚a标签默认的下划线
-
4.line-height行高
-
控制一行的上下行间距，属性名：line-height
-
取值：
-
数字+px；倍数（当前标签font-size的倍数）
应用：
-
让单行文字垂直居中可以设置line-height：文字父元素高度
-
网页精准布局时会设置,line-height:1,取消上下间距
-
行高与font连写的注意点：如果同时设置行高和font，注意覆盖问题
样式的层叠性：
颜色常见取值样式：
文字颜色：color ；背景颜色：background-color
属性值：
Rgb表示法：agb（0，0，0）
Raga表示法：rgba（0，0,0）
十六进制表示（常用）：#00000
标签水平居中的方法：margin：0 auto
注意：
-
如果让div，p，h（大盒子）水平居中，直接给当前亿速本身设置即可
-
Margin：0 auto，一般针对固定宽度的盒子，如果让大盒子没有设置宽度，此时会默认占满父元素的宽度
3.选择器进阶
-
目标：能够理解复合选择器的规则，并使用符合选择器在htm中选择元素
-
复合选择器
-
并集选择器
-
交集选择器
-
hover伪类选择器
-
Emment语法
-
后代选择器
-
作用：根据html标签的嵌套关系，选择父元素后代中满足的条件
-
语法：选择器1 选择器2{css}
-
在选择器1所找到后代（儿子，孙子，，，），找到满足选择器2的标签，设置样式
-
注意点：
-
后代包括：儿子，孙子等
-
后代选择器中，选择器与选择器之间通过空格隔开
<style>
/* 后代选择器 div父元素 p子元素 */
div p{
color: aqua;
}
</style>
<body>
<div>
<p>你好</p>
</div>
</body>2.子代选择器
-
作用：根据htm标签的嵌套关系，选择父元素子代中满足的条件
-
语法：选择器1>选择器2{css}
-
在选择器1所在的标签中找到子代，满足选择器2的标签。设置样式
-
注意：
-
子代只包括;儿子
-
子代选择器中，选择器与选择器之间通过>隔开
-
并集选择器
-
作用：同时选择多组选择器，设置相同的样式
-
语法：选择器1，选择器2{ css}
-
找到选择器1和选择器2选中的标签，设置样式
-
注意：
-
并集选择器中没组选择器之间通过“，”逗号分隔
-
并集选择器的没组选择器可以是基础选择器或者复合选择器
-
并集选择器的没组选择器通常一行写一行，提高代码的可读性
-
交集选择器：紧挨着
-
作用：选中页面中同时满足多个选择器的标签
-
选择器语法:选择器1 选择器2{css}
-
结果
-
找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式
-
注意点：
-
交集选择器中的选择器之间是紧挨着的，没有当下分割开
-
交集选择器中如果没有标签选择器，标签选择器必须写在最前面
style{
p.box{
color:red;}
}
<body>
<p class="box"> 这是p标签</p>
</body>-
hover伪类选择器
-
作用：选中鼠标悬停在元素上的转态，设置样式
-
语法：选择器hover{css}
-
注意点：
-
伪类选择器的元素的某种转态
hover是用来实现划过效果的，非常常用。伪类 :主要是为了元素添加一些效果;这些必须通过鼠标 的事件行为才能触发 伪类:四个===经常应用超链接a标签 上面,其中第124只能用在超链接a上，3没有限制 :link======鼠标访问前的样式 :visited===鼠标访问后的样式 :hover=====鼠标悬停时的样式 :active====鼠标激活瞬间样式,鼠标点击时 冒号前后没有任何的空格符号 注意事项:应用在超链接上面的时候:四个必须遵循以上顺序,不能更改,更改之后实现不了效果 注意实现:开发的时候使用频率最高的就是:hover，实现鼠标悬停的效果;背景颜色改变,文本颜色改 变。 二，扩展 1.伪类选择器:link、hover、active、visited 2.伪对象选择器:after、before、fist-letter/line 3.关于之间的区别 - 写法上的区别:在css2中伪类和伪对象都是一个冒号,在css3中规定伪对象需要使用两个冒号 - 作用上的区别:伪类可以改变元素的状态,伪对象可以添加结构(虚拟的)
-
emmet语法：
-
作用：通过语法快速生成代码，简写
| 记忆 | 示列 | 效果 |
| 标签名 | div | <div></div> |
| 类选择器 | .red | <div class="red"> |
| id选择器 | #one | <div id="one"> |
| 交集选择器 | p.red#one | <p class="red" id="one"></p> |
| 子代选择器 | ul>li | |
| 内部文件 | ul>li 我是内容 | <ul><li>我是内容</li></ul> |
| 创建多个 | ul>li*3 |
4.背景相关属性
-
背景颜色
-
属性名：background-color（bgc）
-
属性值：
-
颜色取值：关键字，rgb元素表示法，rgba表示法，十六进制
-
注意点
-
背景颜色默认是透明：rgba（0,0,0,0）transparent
-
背景颜色不会影响大小，并且还能看清楚盒子大小位置，一般会在布局习惯先给盒子设置背景颜色
-
背景图片
-
属性名：background-image（bgi）
-
属性值：background-image：url（“图片的位置”）
-
注意点：
-
背景图片中url可以省略引号
-
背景图片默认是在水平和垂直方向平铺的
-
背景图片仅仅是在指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的
-
背景平铺
-
属性名：background-repeat（bgr）
-
属性值：
| 取值 | 效果 |
| repeat | （默认值）水平和垂直方向都有平铺 |
| no-repeat | 不平铺 |
| repeat-x | 沿着水平方向x轴平铺 |
| repeat-y | 沿着垂直方向y轴平铺 |
-
背景位置
-
属性名：background-position（bgp）
-
属性值：background-position：水平方向位置 垂直方向位置
-
方位名词（最多只能表示9个位置）
-
水平方向：left center right
-
垂直方向：top，center，botton
数字+px（坐标）：
原点（0,0）盒子的左上角
x轴：水平向右，y轴，垂直向下
操作，将图片左上角与坐标点重合即可
注意点：
方位名词取值和坐标取值可以混合使用，第一个取值表示水平，第二个取值表示垂直
-
背景相关连写属性
属性名:background(bg
属性值:单个属性值的合写，取值之间以空格隔开
书写顺序:
推荐:background:color imagerepeat position
不分先后顺序背景色，背景图，背景平铺，背景位置（）
省略问题:
-
可以按照需求省略
特殊情况:在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background:url()
注意点
如果需要设置单独的样式和连写
①要么把单独的样式写在连写的下面
②要么把单独的样式写在连写的里面
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0”<title>Document</title><style>
div [
width:400px; height:400px;
/*不分先后顺序背景色背景图背景图平铺 背景图位置*/
/* background: pink url(./images/1.jpg) no-repeat center bottom; *//*背景图位置如果是英文单词可以颠倒顺序 */
background: pink url(./images/1.jpg)no-repeat bottom center ;
/* 测试背景图位置如果是数值不要颠倒顺序 */* 水平50px，垂直100px*/
/* background: pink url(./images/1.jpg)no-repeat 50px 100px; */
background: pink url(./images/1.jpg)no-repeat 100px 50px;
</style></head><body>
<div></div></body></html>-
（拓展）img标签和背景图片的区别
-
需求：需要在页面中展示一张图片效果？
-
方法一：直接写上img标签设置即可
-
img标签是一个标签，不设置宽高默认会以原来的尺寸显示
-
方法二：div标签+背景图片
-
需要设置div的宽高，因为背景图片只是装饰的css样式，不能撑开div标签
5.元素显示模式
-
块级元素（block）
定义：默认情况下，独占一行的元素就是块级元素。
-
显示特点：
-
独占一行（一行只能显示一个）
-
宽度默认是父元素的宽度，高度默认是由内容撑开的
-
可以设置宽高
代表标签：
div，p，h系列，ul,li,dl,dt,dd,from,header,nav,footer
-
行内元素
定义：默认情况下，一行能显示多个，并且元素的高度、宽度、行高等不能直接设置
行内元素的特点：
（1）相邻行内元素在一行上，一行可以显示多个。
（2）高、宽直接设置是无效的。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。
注意：
链接里面不能再放链接。
特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。
举例子：
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。有的地方也成内联元素
-
行内块元素（内嵌块元素）
元素的高度、宽度、行高、以及顶部底部的内外边距都可以设置
常见的行内块元素：<img>,<input>
-
显示特点：
-
一行可以显示多个
-
可以设置宽高
-
代表标签：
-
input，textarea,button,select
-
特殊情况：img标签由行内块元素的特点，但是谷歌调试器中显示的结果是inline
-
元素显示模式转换
这三种元素之间可以通过display属性相互转换，并且也可以通过浮动、定位等进行转换
元素显示模式转换display
块转行内：display:inline;
行内转块：display:block;
块、行内转换为行内块：display:inline-block
-
html嵌套规范
-
块级元素一般作为大容器，可以嵌套文本，块级元素，行内块元素等
-
但是p标签中不要嵌套div p h等块级元素
-
a标签内可以嵌套任何元素
-
但是：a标签不能嵌套a标签
6.css的特征
1.1继承性的介绍
特性:子元素有默认继承父元素样式的特点(子承父业)
可以继承的常见属性(文字控制属性都可以继承)
1. color
2. font-stylefont-weightfont-sizefont-family
3. text-indenttext-align
4. line-height
-
注意点: 可以通过调试工具判断样式是否可以继承
-
继承性失效的情况
-
如果有元素有浏览器默认的样式，此时继承性依然存在
-
a标签的color继承失效
-
h系列的font-size继承会失效
2.1层叠性的介绍
特性:
1.给同一个标签设置不同的样式→此时样式会层叠叠加→会共同作用在标签上
2.给同一个标签设置相同的样式→此时样式会层叠覆盖→最终写在最后的样式会生效注意点:
-
当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
3.1优先级的介绍
>特性:不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式:
继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
注意点:
1.!important写在属性值的后面，分号的前面!
2.!important不能提升继承的优先级，只要是继承优先级最低!
3.实际开发中不建议使用!important。
3.2权重叠加计算
场景:如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
权重叠加计算公式:(每一级之间不存在进位)
范围越来越广 优先级越低，按级别个数 不能进位 自己是多少就是多少个
复合选择器中:行内样式的个数id选择器的个数类选择器的个数标签选择器的个数
比较规则:
1.先比较第一级数字，如果比较出来了，之后的统统不看
2.如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
3. .....
4.如果最终所有数字都相同，表示优先级相同，则比较层叠性(谁写在下面，谁说了算!)
注意点:!important如果不是继承，则权重最高，天下第一!
7.谷歌调试器测试工具
8、盒子模型
1盒子模型的介绍
1.盒子的概念
1.页面中的每一个标签，都可看做是一个“盒子”，通过盒子的视角更方便的进行布局
2.浏览器在渲染(显示)网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子
2.盒子模型
CSS中规定每个盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成，这就是盒子模型
-
记忆:可以联想现实中的包装盒
<style>
/* 纸箱了，填充泡沫 */
div{
width:300px;
height: 300px;
background-color: pink;
/* 边框线 ==纸箱子
border: 1px solid □#000;
/* 内边距 == 填充泡沫 :出现在内容和盒子边缘之间*1
padding:20px;
/*外边距:出现在两个盒子之间，出现在盒子的外面*/
margin: 50px;
</style>
</head>
<body>
<div>内容电脑</div>
<div>内容电脑</div>
</body> 2.内容的宽度和高度
作用:利用width和height属性默认设置是盒子内容区域的大小属性:width/height
常见取值:数字+px 盒子内容区域heigt width
3.边框（border）
属性名：border
属性值：单个取值的连写，取值之间以空格隔开{ 如：border：10px solid red；}
快捷键：bd+tab
{ 如：border：10px solid red；}实线
{ 如：border：10px dashed red；} 虚线
{ 如：border：10px dotted red；} 点线
边框（border） -单个属性
| 边框粗细 | border -width 数字+px |
| 边框样式 | border-style 实线solid，虚线：dashed，点线：dotted |
| 边框颜色 | border-color 颜色取值 |
盒子尺寸= width/height +边框线
11-盒子模型-内边距
多值写法：上右下左，顺时针顺序，如果数值不够，看对面数值
div{
width: 300px;
height: 300px;
background-color: pink;
/*添加了4个方向的内边距*/
padding:50px;
/* padding 属性可以当做复合属性使用，表示单独设置某个方向的内边距*/
/* padding 最多取4个值 */
/*四值:上右下左*/
/* padding: 10px 2epx 40px 80px; */
/*三值:上左右 下*/
/* padding: 10px 40px 80px;*/
/* 两值 */
padding: 10px 80px;
} 4.5CSS3盒模型(自动内减)
给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大?
解决方法 ①:手动内减
·操作:自己计算多余大小，手动在内容中减去
缺点:项目中计算量太大，很麻烦解决方法 ②:自动内减
操作:给盒子设置属性box-sizing:border-box;即可·优点:浏览器会自动计算多余大小，自动在内容中减去
5.4清除默认内外边距
场景:浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的 margin和padding，后续自己设置·比如:body标签默认有margin:8px
比如:p标签默认有上下的margin
比如:ul标签默认由上下的margin和padding-left
解决方法：
*{
margin：0；
padding：0
}版心居中：
<style>
div【
width: 1000px;
height: 300px;
background-color: pink;
margin: 0 auto;
</style>
</head>
<body>
<!-- 版心:网页的有效内容 -->
<!-- 版心居中 -->
<div>版心</div>
</body> </html> 5.7外边距折叠现象-合并现象
场景 垂直布局 的 块级元素 上下的margin会合并
结果:最终两者距离为margin的最大值解决方法:避免就好
只给其中一个盒子设置margin即可
<style>
span {
/* margin: 100px; */
/* padding: 100px; */
line-height:100px;
</style>
</head>
<body>
<!-- 行内元素内外边距 margin padding -->
<!-- 如果想要通过margin或padding改变行内标签的垂直位置，无法生效 -->
<!-- 行内标签的margin-top和bottom 不生效 -->
<!--行内标签的padding-top或botttom不生效 -->
<span>span</span>
<span>span</span>
</body>
</html>5.8外边距折叠现象-②塌陷现象
<style>
.father {
width: 300px; height: 300px;
background-color:pink;/* padding-top: 50px; */
/* 如果设计稿没有border，不能使用这个解决办法 */
/* border: 1px solid #000; */
/* overflow: hidden; */}
.son[
width: 100px;
height: 100px;
background-color: Iskyblue;
margin-top:50px;
display:inline-block;
</style></head>
<body>
场景 互相嵌套 的 块级元素， 子元素的margin-top会作用在父元素上
结果:导致父元素一起往下移动
解决方法:
1.给父元素设置border-top或者padding-top(分隔父子元素的margin-top)
2.给父元素设置overflow:hidden
3.转成行内块元素
4. 设置浮动
346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
