全局样式
这里是标题
p标签定义的style生效
类样式
这里是标题
张家齐见世面！亲密合影姆巴佩
张家齐见世面！亲密合影姆巴佩
背景样式
这里是标题
外部样式
这里是标题
文本样式
p{
/*可以直接在color后写颜色的单词*/
color: plum;
/*直接在后面编写十六进制颜色码*/
color: #cccccc;
/*使用rgb标识*/
color:rgb(238,130,238);
}
| 属性 | 属性值 | 作用 |
|---|---|---|
| color | 表示颜色的内容 | 设置文本颜色 |
| direction | ltr/rtl | 文本的方向/书写方向 |
| letter-spacing | npx(可以为负数) | 字间距 |
| line-height | npx | 行高 |
| text-aglin | left/right/center/justify(2端对齐) | 文本对齐方向 |
| text-decoration | none/underline/overline/line-through | 文本的修饰:下划线等 |
| text-shadow | h-shadow/v-shadow/blur/color | 设置文本阴影 |
| text-transform | none/capitalize/uppercase/lowercase | 改变字母大小写 |
| text-indent | npx/nem | 首行缩进 |
p{
color: plum;
direction: ltr;
letter-spacing: 4px;
line-height: 5px;
text-align: justify;
text-decoration: line-through;
text-shadow:5px,5px,5px,red;
text-transform:uppercase;
text-indent: 2em;
}
字体样式
| 属性 | 属性值 | 作用 |
|---|---|---|
| font-family | 隶属/楷书/宋体 | 设置字体 |
| font-style | normal/italic/oblique | 设置斜体文本 |
| font-weight | normal/bold/100-900 | 文本的粗细 |
| font-size | px | 字体大小 |
列表样式
| 属性 | 属性值 | 作用 |
|---|---|---|
| list-style-type | none/disc/circle/square/decimal... | 设置列表项目的外观 |
| list-style-postion | inside/outside | 列表符号的位置 |
| list-style-image | url/none | 把图像设置为列表项目的标记 |
| list-style | 同前面三个 | 简写属性,涵盖以上三个列表样式属性 |
伪类
超级链接上的样式称为伪类：
- 伪类是用在超链接上的效果但超链接不是伪类；
- 伪类是选择器；
- 伪类分为状态性伪类和结构性伪类；
状态性伪类选择器：
| 属性 | 作业 |
|---|---|
| a:link | 未访问的链接 |
| a:visited | 已访问的链接 |
| a:hover | 鼠标移动到链接上（浮动，悬停） |
| a:active | 向被激活的元素添加样式（鼠标已按下未抬起） |
| :focus | 选择拥有键盘输入焦点的元素 |
firstHtml
伪类
/*a代表便签，也可以是其他标签*/
a：link{
color: red;
}
a:visited{
color: :green;
}
a:hover{
color: gray;
size: 20px;
}
a:active{
color: black;
}
结构性伪类：
| 属性 | 作业 |
|---|---|
| :first-child | 选择父元素的第一个子元素 |
| :last-child | 选择某个元素的最后一个子元素 |
| :nth-child(num) | 选择某个元素的一个或多个特定的子元素 |
| :nth-last-child(num) | 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个元素开始算 |
| :first-of-type | 选择一个类型元素下的第一个同类子元素 |
firstHtml
CSS
CSS
CSS
p:first-child{
color: red;
}
p:last-child{
color: green;
}
伪元素选择器
| 属性 | 作业 |
|---|---|
| ::selection | 选择指定元素中被用户选中的内容 |
| ::before | 可以在内容之前插入新内容 |
| ::after | 可以在内容之后插入新内容 |
| ::first-line | 选择指定选择器的首行(每个标签内容的第一行) |
| ::first-letter | 选择文本的第一个字符 |
firstHtml
CSS
CSS
CSS
p::before{
/*content固定写法，在所有p标签的前面新增的内容*/
content: "hello,"
}
p::after{
content: "...";
}
/* *代表所有标签 */
*::selection{
background-color: red;
}
css其他选择器
| 选择器 | 作用 |
|---|---|
| id,* | 选择指定元素中被用户选中的内容 |
| 逗号选择器 | 联合选择器 |
| 空格选择器 | 子孙（后代）选择器 |
| >选择器 | 子选择器（不是后代） |
| +选择器 | 相邻兄弟选择器 |
| [] | 属性选择器 |
id选择器
CSS
CSS
CSS
/* id选择器在前面加#号*/
#name1{
color: red;
}
#name2{
color: gray;
}
*号选择器
/* body内所有的标签内容*/
*{
font-size: 20px;
color: blue;
}
逗号选择器
//将不同id或其他标识的组合在一起，和class效果一样
#name1,#name2,p{
color: red;
}
空格选择器
firstHtml
CSS1
CSS2
CSS
/* 空格选择器 父容器+空格+子元素则为父元素下子孙后代的所有子元素生效*/
#div1 p{
color: red;
}
>选择器
CSS1
CSS2
CSS
/* >选择器 父容器+>+子元素则为父元素下第一代的所有子元素生效，再下一代的不生效*/
#div1>p{
color: red;
}
+号选择器
CSS1
CSS2
CSS
/* +选择器 父容器+“+”+子元素则为父元素统计元素生效*/
#div1+p{
color: red;
}
[]属性选择器
CSS1
CSS2
CSS
/* []选择器*/
p[class="name1"]{
color: red;
}