入门知识整理（一）"/>
CSS入门知识整理（一）
记录不是首要目的，只是想回顾一下学习的内容~
（标签左右多了空格不是我有毛病，是编辑器这样做才能显示）
1.CSS简介
Cascading Style Sheets 层叠样式列表
2.CSS作用
- 结构与样式分离的方式，便于后期维护和改版
- 可以用多套样式，使网页有任意样式切换的效果
- 使页面载入得更快，降低服务器的成本
3.CSS样式表分类：外部（单独一个css文件）、内部（在html里一起使用）、行内样式。
4.CSS样式文件结构：
p{background-color: red;font-size: 20px;
}p是样式选择器、background-color: red; 分别是属性、分隔符、属性值。
5.常用选择器：标签选择器、类选择器（class）等。
类选择器定义
定义：
< p class="p1" >嘤嘤嘤< /p >使用：
.p1{属性：属性值
}
6.背景样式
| 属性 | 属性值 | 作用 |
|---|---|---|
| background-color | 背景颜色 | |
| background-image | 背景图片 | |
| background-repeat | repeat、repeat-x、repeat-y、no-repeat | 背景图片的重复方向 |
| background-attachment | scroll、fixed | 是否随滚动条滚动 |
| background-position | 背景图定位 | |
| background | 背景样式的值是复合属性值的组合 |
position:
7.外部样式：使结构层和表示层分离
示例：< link rel = “stylesheet” type = “text/css” href = “index.css” >(除了link还可用其他链接）
link：定义文档与外部资源的关系。
rel：relationship 关系。
type：文件类型，此处可以省略，目前link基本都是用于链接css。
href：指定文件。
8.颜色表
9.文本样式
| 属性 | 属性值 | 作用 |
|---|---|---|
| color | ||
| direction | rtl 右对齐，ltr左对齐 | 文本对齐 |
| letter-spacing | npx（n可为负值） | 字符间距 |
| line-height | npx | 行高 |
| text-align | left、right、center、justify(两段对齐) | 文本分布 |
| text-decoration | none、underline、overline、line-through | 下划线 |
| text-shadow | h-shadow（行坐标）、v-shadow（列坐标）、blur（阴影程度，npx，越大越糊）、color（颜色） | 文本设置阴影 |
| text-indent | npx、nem（字符距离） | 首行缩进 |
10.字体样式：
| 属性 | 属性值 | 作用 |
|---|---|---|
| font-family | 隶书、仿书 | 字体 |
| font-size | normal、italic、oblique | 大小 |
| font-weight | normal、bold | 粗细 |
| font-style | npx | 斜体 |
11.列表样式
| 属性 | 属性值 | 作用 |
|---|---|---|
| list-style-type | none、disc、circle、square、decimal | 设置列表项目的外观 |
| list-style-position | inside、outsize（靠的远） | 列表符号位置 |
| list-style-image | url、none | 把图像设置为列表项目的标记 |
| list-style | 复合属性值组合 |
- 伪类：通常情况，超级链接上设置的样式，称为伪类。
tips：伪类是用在超链接上的效果比较多，但超链接不是伪类。 伪类是选择器。
伪类选择器：
| 属性 | 作用 |
|---|---|
| a:link | 未访问的链接 |
| a:visited | 已访问的链接 |
| a:hover | 鼠标移动到链接上（浮动、悬停） |
| a:active | 向被激活的元素添加样式 |
| :focus | 选择拥有键盘输入焦点的元素 |
示例：
定义：
<a href="#">伪类</a>使用：
a:link{color:red;
}
a:visited{color: green;
}
a:hover{color: yellow;font-size: 30px;
}
a:active{color:blue;
}
a:link未访问时为红色
a:hover鼠标悬停时为黄色
a:active 点击激活时为蓝色
a:visited 访问过后为绿色。
- 伪类的分类：上面的内容是状态伪类，下面的为结构性伪类。
14.结构性伪类：
| 属性 | 作用 |
|---|---|
| :first-child | 选择元素的第一个子元素 |
| :last-child | 选择某个元素的最后一个子元素 |
| :nth-child（） | 选择某个元素的一个或多个特定的子元素 |
| :nth-last-child() | 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算 |
| :first-of-type | 选择一个上级元素下的第一个同类子元素 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="index.css">
</head>
<body><p>ddd</p><p>kkk</p><p>fff</p><h1>嘤嘤嘤</h1><table border="1" width="500px"><tr><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td></tr></table>
</body>
</html>
p:nth-child(2){background-color: red;
}td:nth-last-child(2){background-color: red;
}
15.伪元素选择器
| 属性 | 作用 |
|---|---|
| ::selection | 选中内容 |
| ::before | 在内容的前面 |
| ::after | 在内容的后面 |
| ::first-line | 选择指定选择器的首行 |
| ::first-letter | 选择文本的第一个字符 |
p::before{content: "我是头，";
}
/*可以将body也换成h1*/
body::after{content: "我是尾，";
}
p::first-line{background-color: yellow;
}
p::first-letter{font-size: 30px;
}
p::selection{background-color: red;
}
16.其他选择器
| 选择器 | 作用 |
|---|---|
| id | 使用:#id{ } |
| 逗号选择器 | #id, #id2{ } |
| 空格选择器 | 也叫后代选择器 #先代 后代{ } |
| >选择器 | 只属于自己（子选择器） |
| +选择器 | 同级选择器（相邻兄弟选择器） |
| []选择器 | 属性选择器 |
/*子孙选择器*/
/*#div1 p{color: red;
}*//*子选择器*/
/*#div1>p{color:red;
}*//*相邻兄弟选择器*/
/*#div2+div{color: red;
}*//*属性选择器*/
p[class="p1"]{color:red;
}
17.CSS选择器优先级
从高到低：
1. ! important
2. 行内样式
3. ID选择器
4. 类选择器
5. 标签选择器
6. 通配符
7. 浏览器默认属性
更多推荐
CSS入门知识整理（一）
发布评论