入门知识整理(一)"/>
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入门知识整理(一)
发布评论