1. css 简介
html是页面的结构，css是有网页的化妆师，是页面更加的样式根据的丰富。
2. css基础选择选择器
2.1 通配符选择器
CSS 中， 通配符使用 * 定义，它表示选取页面中所有元素(标签)
* {
属性1：属性值1;
....
}2.2 标签选择器
标签选择器以标签选择一类标签指定css样式。
- 优点可以统一改变或设置一类标签的样式
- 缺点无法差异化设置即：这样一类标签中某些标签的样式修改
标签名 {
属性1: 属性值1;
属性2: 属性值2;
}
2.3 类选择器
已选标签的class="name",挑选出这些标签指定css设置样式
<div class='red'> 变红色 </div>
.red {
属性1: 属性1值;
属性2: 属性2值;
}- 类选择器在HTML 中标签属性class="name", 在css中样式.name 必须点开头。给一些标签指定特定的样
- 可以使用多个类名， class="name1 name2 name3"，中间空格分开，css中可以设置特点的样式。特定的class 指定特定样式，然后去个性化设置颜色
2.4 id选择器
<div id="name"></div>
#name {
属性1: 属性1值;
属性2: 属性2值;
}- id 属性在hmtl中只能是有一次。决定了id的唯一性，从而单一设置这一个标签的特定样式
- 标签属性 id="name", 样式#name来定义，只能调用一次，别人一用就报错
区别：
- 通配符选择器类似全国人，
- 标签选择器类似那个省的人，
- 类名类似人的 姓名,（性别年级，）
- id选择器类似人的身份证
- 记忆，统配*概括，标签自己上，class前面带个.,#是id
3. css 字体属性
- 倍率font-family 属性文字字体。后面可以设置多个 逗号分割，浏览器现配第一个，否则匹配第二个字体，依次类推
- font-size 设置字体的大小：font-size:10px, 需要带单位px,em等
- font-weight 设置字体的粗细，100-900，或者light normal bold,常用数字
- font-style 设置文字的样式 normal/italic 文字是否倾斜
- line-height 字体的行高：可以是font-size一样设置或者1.5倍率表示font-size的倍率
body{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 18px;
font-weight: 400;
font-style: italic;
}字体的复合（简写）font: font-style font-weight font-size/line-height font-family
其中font-size font-family必须写。
总结：
| 字体属性 | 表示 | 注意 |
|---|---|---|
| font-size | 字体大小 | 单位是 px或者em |
| font-family | 字体 | 按照团队约定来写 |
| font-weight | 字体粗细 | 100-900， 400=normal，700=bold |
| font-style | 字体样式 | italic，normal，常用 normal |
| line-height | 字体的高度 | 单位是 px或者em，或者1，1.2不带单位表示font-size的倍率 |
| font | 属性连写 | 顺序不能变，字体和字号属性必须有 |
4 文本的属性
- color 设置文本的颜色: 颜色名字red green | 十六进制0xffffff | rab(r,gb) | rgba(r,g,b,a)
- text-align 文本的对齐方式
属性 备注 center 居中对齐 left 左对齐（默认） right 右对齐 - text-decoration 文本修饰：可以给文本添加下划线、删除线、上划线等
属性值 描述 none 默认，无装饰或去掉a的下划线 underline 下划线，a 标签自带 overline 上划线。 line-through 删除线 -
text-indent 文本的缩进可以带单位px或者em，一般用em 表示字符的大小2em表示两个字体
-
line-height 行高上面已经描述。
5 css的应用方式
- HMTL网页内部引用：
<style>理论上可以放在 HTML 文档中任何一个地方，一般放在<head>标签中，常用于css 代码不多，练习常用 - 外部样式：css写在css文件中 <link rel="stylesheet" href="css文件路径" /> 常用于开发中
- 行间样式：标签的style属性，常用于js动态设置
6 复合选择器
由基础选择器组合而成的选择器
- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择
6.1 后代选择器
后代选择器又称包含选择器：标签一层一层的往下找基础选择器，中间用空格分开
<div>
<div class="name">
<p id="sex">男</p>
<p id="male">女</p>
</div>
</div>
修改男的字体为红色，女为蓝色
div .name #sex {
color: red;
}
div .name #male{
color: blue;
}6.2 子选择器
子选择器又称亲子选择器：父子不包括孙子后代,大括号选定
元素1 > 元素2 { 样式声明; }
6.3 并集选择器
选择器的集合，这个是css的简写模式把样式集中放在一起，个别不一样再单独分开
元素1, 元素2 { 样式声明; }
6.5 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。 伪类选择器书写最大特点是用冒号 : 表示。 伪类选择器种类多，比如链接伪类选择器、结构选择器等
1 链接伪类选择器
- a:link 链接未被访问
- a:visited 链接已经被访问
- a:hover 鼠标放在链接上面
- a:active 选择器鼠标按下未弹起
注意：上面如果要生效必须按顺序，LVHA:lv是个好东西。如果只用其中一个就无需在意
2 :focus 伪类选择器
伪类选择器用于获取焦点的表单元素。 焦点就是光标，常用于input ,textarea
/* 去掉输入框的获得焦点的蓝色高亮边框 */
input:focus{
outline: none;
}3 ::before和::aftter
css的伪元素用于创建一个子元素（没有语义的标签但是在样式中又必须存在），before 在最前面插入第一个元素，after在最后面添加一个元素
7 元素显示模式
标签在布局的时候，体现不同的展示可以为：块元素，行内元素行，内块元素
7.1 块元素
常见的块元素有：h1~h6，p , div, ul, ol, li, table等块元素的特点
- 独占一行
- 可以设置高度，宽度，边距，内边距，外边距
- 宽度默认占满父元素：width=100%
- 里面可以块元素和行内元素。
- 文字类块元素不能放其他的块元素，p， h1~h6不要再放其他的块元素了
7.2 行内块元素
创建的行内块元素有：a, strong, b , em , i , del, s, ins, u, span,等
行内元素的特点
- 一行可以显示多个
- 不能设置宽高
- 默认是元素的本身的大小
- 行内元素只能方行内元素
- a 标签最好不要方a标签
7.3 行内块元素
常用标签有 img， input， td ，具有行元素和行内元素的特点
- 一行可以放置多个
- 可以设置宽高，外边距，内边距
- 默认宽高是元素本身的大小
元素的显示模式可以修改
dispalye： block/inline/inline-block
8 css背景
1 background-color 设置元素的背景颜色，值跟color的值一样
background-color：red
2 background-image 设置背景图片
background-image: url(图片的地址)
3 background-repeat 设置图片平铺属性. 当图片的大小小于元素的宽高设置图片的重复显示的模式
| 属性 | 备注 |
| none | 不设置 |
| repeat | 默认，重复填充，x,y周方向 |
| repeat-x | x轴方向填充 |
| repeat-y | y轴方向填充 |
4 背景图片的位置background-pisition
background-position: x y;
x，y 可以使数值的大小单位，也可以是方位词：top， left, right,bottom,centter，也可以混合使用
注意
- 当x,y都是方位词是时，不区分前后，即 left center 和center left 效果是一样的
- 当只有一个值时（数值或方位），第二个为居中显示
- 混合使用，第一个为x值，第二个为y值
5 背景图片的固定
background-attachment 设置背景图片是否随元素的滚动
| 属性 | 备注 |
| scroll | 背景图标跟者元素滚动而滚动 |
| fied | 背景图片固定 |
6 背景的复合写法
background : 背景颜色 背景图片 背景平铺 背景滚动 背景位置
background : transparent url(image.png) no-repeat fixed top center;
9 css的三大特性
9.1 层叠性
相同选择器设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。层叠性主要解决样式冲突的问题。
层叠性原则：样式冲突 就近原则 后浪推前浪，前浪拍死在沙滩上。
9.2 继承性
CSS 中子标签会继承父标签的某些样式。一般是文本字体的样式
- 文本样式，text-开头
- 文字样式 font-开头
- line-height 如果line-height 的值是倍率r的话，表示是当前元素自己的font-size*r 如果是数值的就是这个数值
9.3 优先级
优先级是指当有多个选择器指向同一个元素，就要遵循优先原则
- 当选择器的权重一样， 则css遵循层叠性
- 当权重不一样，则按css选择器的权重执行
选择器的权重如下：
| 选择器 | 权重 |
| 继承或者* | 0，0，0，0 |
| 标签选择器 | 0，0，0，1 |
| 类，伪类选择器 | 0，0，1，0 |
| id选择器 | 0，1，0，0 |
| 行内选择器style | 1，0，0，0 |
| !important | 无穷大 |
- 我们通常通常 继承或者*：权重0， 标签选择器：权重1，类，伪类选择器权重10，id选择器 100，行内选择器style：权重1000（正常情况不会又那么多层）
- 注意：继承或者*权重为0，权重可相加但永远不会进位：即上面的表格下面的永远比上面的权重大
10 盒子模型
CSS 通过盒子来布局,盒子元素有
- border 边框
- padding 内边距
- content 内容
- margin 外边距
10.1 border 边框
border 边框属性由上下左右四个边框构成：
| 边距 | 备注 |
| border-top | 上边框 |
| border-left | 左边框 |
| border-right | 右边框 |
| border-bottom | 下边框 |
| border | （简写）包含上下左右 |
每个边框的属性值：border-width border-style border-color
| 属性 | 备注 |
| border-width | 边框的大小，单位像素 |
| border-style | 边框的样式（线、点等） |
| border-color | 边框的颜色 |
- 可以简写border，可以一个一个写border-top,border-left等
- 边框大小影响盒子的大小，css3中如果设置box-sizing: border-box;边框不影响盒子的大小
- 如果盒子是<table>可以用border-collapse合并表格的相邻边框
10.2 padding 内边距
padding 指元素的内边距，即盒子的内容大小与盒子边框的距离
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding -top | 上内边距 |
| padding-bottom | 下内边距 |
padding属性(简写属性)可以有一到四个值
padding : 5px; 1个值，代表上下左右都有5像素内边距
padding :5px 10px; 2个值，代表上下内边距是5像素，左右内边距是10像素
padding: 5px 10px 20px; 3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素
padding :5px 10px 20px 30px 4个值，上是5像素，右是10像素，下20像素，左是30像素，顺时针
padding会 影响盒子的大小,特别：设置了盒子的宽高以后在设置padding会撑大盒子,如果没有设宽高，就不会影响盒子的大小
10.3 meigin 盒子边框
margin 属性组成和padding类似简写方式也是一样的。
| 属性 | 作用 |
|---|---|
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
简写方式参考上面的padding
- 对于一个连个相邻的盒子之间设置了都设置margin，不是他们设置的他们和，而是取最大z值：例如上下两个盒子，上面那个设置margin-bottom:20px, 下面那个盒子设置了margin-top:30px,两个盒子之间的距离不是 20+30=50px,而是max(20,30)px = 30px取最大值
- 对于两个嵌套的盒子，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。外边距塌陷。解决方法有如下：1.为父元素添加边框 2.父元素设内边距，3. overflow:hidden;
- 设置盒子水平居中：1.盒子必须指定宽度（width）2 盒子左右的外边距都设置为
auto - 清除所有内外边距 * { margin: 0; padding: 0; }
11. 圆角
CSS3 新增border-radius 圆角边框 属性，盒子可以变成圆角。
- 若盒子的width与height相等是设置50%就是一个圆
- 简写属性border-radius跟padding简写样式是一样的
- 分开写业余padding是一样的
12 盒子阴影
CSS3 新增盒子阴影，使用 box-shadow 属性。盒子阴影不占空间，不会影响其他盒子排列
bxo-shadow: h-shadow v-shadow blur spread color inset;| 值 | 描述 |
|---|---|
| h-shadow | 必需，水平阴影的位置，允许负值 |
| v-shadow | 必需，垂直阴影的位置，允许负值 |
| blur | 可选，模糊距离 |
| spread | 可选，阴影的尺寸 |
| color | 可选，阴影的颜色 |
| inset | 可选，将外部阴影改为内部阴影（默认是外部阴影）如果是默认不要写 |
13 文字阴影
CSS3 中，使用 text-shadow 属性设置文本阴影。
| 值 | 描述 |
|---|---|
| h-shadow | 必需，水平阴影位置。允许负值。 |
| v-shadow | 必须，垂直阴影。允许负值。 |
| blur | 可选，模糊距离。 |
| color | 可选，阴影颜色。 |
1388
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
