CSS基础
# HTML基础知识回顾
# HTML
# 标签分类
内敛标签:不独占一行,只能嵌套内敛标签
块级标签:独占一行,能嵌套内敛标签和某些块级标签
# 标签封闭
<img > 自封闭
<div></div> 全封闭
1
2
2
# head标签
meta标签,title标签
# body标签
h1-h6 b u s i p span div br hr img a form input button table ul li ol li select label
textarea dl dt dd
特殊符号 空格...
1
2
3
4
2
3
4
# input
type属性
text password date radio checkbox file submit reset button hidden
name属性 分组,提交数据时的key,提交的数据value
value属性 指定默认值
默认选中 checked属性
readonly 只读
disabled 禁用
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# table
<table border="1" cellpadding="1" cellspacing="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>alexdsb</td>
<td>84</td>
<td>吹牛逼</td>
</tr>
</tbody>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# form表单
<form action="地址">
<input type="text" name="username">
<input type="radio" name="sex" value="1">
<input type="radio" name="sex" value="2">
<input type="submit">
<button>提交</button>
</form>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# img
<img src="图片地址" alt="图片未加载成功的提示信息" title="鼠标悬浮的提示信息" width="1" height="1">
1
# a
<a href="超链接地址" target="_blank"></a>
<a href="超链接地址" target="_self"></a>
1
2
2
# select下拉框
<select name="city" multiple>
<option value="1">上海</option>
<option value="2" selected>深圳</option>
<option value="2">惠州</option>
</select>
selected默认选中
multiple 多选
1
2
3
4
5
6
7
2
3
4
5
6
7
# label标签
<label for="username1">用户名</label>
<input type="text" name="username1" id="username1">
<label>
<input type="text" name="username2" id="username2">
</label>
1
2
3
4
5
6
2
3
4
5
6
# textarea 文本输入框
<textarea name="" id="" cols="30" rows="10"></textarea>
1
# CSS基础
CSS选择器(Cascading Style Sheet,层叠样式表)
css代码写法: h1{color:red;} 选择器{css属性:属性值;}
css代码引入
方式1
head标签里面写
<style>
div{
background-color: red;
height: 100px;
width: 100px;
}
</style>
方式2
内敛样式:
<div style="background-color: blue; height: 200px;width: 200px;"></div>
方式3
外部文件引入
head标签里面写link标签
<link rel="stylesheet" href="文件路径">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# css选择器
# 基本选择器
元素选择器:
div{ #标签名字
color:red;
}
id选择器:id值不能重复
<div id="xuefei">
雪飞大美女
</div>
#xuefei{
color:green;
}
类选择器: 类值可以重复
<div id="dazhuang" class="c1">
大壮dsb
</div>
<div id="xuefei" class="c1">
雪飞大美女
</div>
.c1{
color: green;
}
div.c1{ #div标签里面含有class值为c1的标签
color: green;
}
通用选择器
*{ #找到所有的标签
color: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# 组合选择器
# 后代选择器
div a{ #找到div标签后代里面的所有a标签
color:red;
}
1
2
3
2
3
# 儿子选择器
div>a{ #找到div的儿子标签这一代的a标签
color:red;
}
1
2
3
2
3
# 毗邻选择器
div+a{ #找到是紧挨着div标签的下一个标签(是兄弟标签)
color: red;
}
1
2
3
2
3
# 弟弟选择器
div~a{ #找到的是同级的后面的所有兄弟标签
color: red;
}
1
2
3
2
3
# 属性选择器
#通过属性名来查找
[title]{ #找到所有含有title属性的标签
color: red;
}
div[title]{ #含有title属性的div标签
color: red;
}
#通过属性名对应的值来查找,当属性值的值为数字的时候,数字要加上引号[title='666']
input[type=text]{ #含有type属性,并且type属性的值为text的input标签
background-color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 分组
多个选择器选择的标签设置相同css样式的时候,就可以用分组
div,p{ #div选择器和p选择器共同设置相同的样式,可以逗号分隔
color:red;
}
1
2
3
4
2
3
4
# 伪类选择器
a标签自带的效果:未访问过的时候是蓝色的字体颜色,访问过之后是紫色的,自带下划线
/* 未访问的链接 */
a:link {
color: #FF0000
}
/* 已访问的链接 */
a:visited {
color: #00FF00
}
/* 鼠标移动到链接上 */ 这个用的比较多,可以应用在其他标签上
a:hover {
color: #FF00FF
}
/* 选定的链接 */ 就是鼠标点下去还没有抬起来的那个瞬间,可以让它变颜色
a:active {
color: #0000FF
}
/*input输入框获取焦点时样式*/
input:focus { #input默认的有个样式,鼠标点进去的时候,input框会变浅蓝色的那么个感觉
#outline: none;
background-color: #eee; #框里面的背景色
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# 伪元素选择器
/*伪元素选择器*/
div:first-letter{
color: red;
font-size: 20px;
}
/*在p标签内容的前面插入一些内容*/
p:before{
content: '?';
color: green;
font-size:100px;
}
/*在p标签内容的后面插入一些内容*/
p:after{
content: '哈哈!';
color: pink;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 选择器的优先级
/*优先级数字越大,越优先显示其效果,优先级相同的,显示后面定义的选择器对应的样式*/
/*id选择器优先级为100*/
/*#d1{*/
/*color:deepskyblue;*/
/*}*/
/*!*继承的优先级为0*!*/
/*body{*/
/*color:red;*/
/*}*/
/*!*类选择器的优先级是10*!*/
/*.c1{*/
/*color: blue;*/
/*}*/
/*.c2{*/
/*color: orange;*/
/*}*/
/*!*元素选择器优先级是1*!*/
/*div{*/
/*color: green;*/
/*}*/
内敛样式优先级为1000
<p class="cc3" style="color: red;">我是cc3的p标签</p>
important优先级最高,最牛逼
.cc1 .cc3 {
color: purple!important;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# css属性相关
高度宽度设置,注意:只有块级标签能够设置高度宽度,内敛标签不能设置高度宽度,它的高度宽度是由内容决定的
div{
width: 100px; 宽度
height: 100px; 高度
background-color: pink;
}
1
2
3
4
5
2
3
4
5
补充:a标签的字体颜色设置必须选中a标签才行
.c1 a{
color: red;
}
1
2
3
2
3
# 字体属性
# 字体
.c1{
font-family: '楷体','宋体','微软雅黑';
}
1
2
3
2
3
# 字体大小
.c1{
/*font-family: '楷体','宋体','微软雅黑';*/
font-size:14px; 默认字体大小为16px.
}
1
2
3
4
5
2
3
4
5
# 字体颜色
color:red;
1
# 子重,粗细
.c1{
font-weight: bold;
font-weight: 100;
}
值 描述
normal 默认值,标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细,400等同于normal,而700等同于bold
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 颜色表示方式
p{
/*color: red;*/
/*color: #78FFC9;*/
/*color: rgb(123,199,255);*/
color: rgba(123,199,255,0.3); 多了一个透明度的数字:0-1的一个数字
}
1
2
3
4
5
6
2
3
4
5
6
# 文字属性
# 文字对齐
text-align
div{
width: 200px;
height: 200px;
background-color: yellow;
/*text-align: center;*/
text-align: right;
}
left 左边对齐 默认值
right 右对齐
center 居中对齐
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 文字装饰
text-decoration
div a{
/*text-decoration: none;*/ #给a标签去除下划线
/*text-decoration: line-through;*/
text-decoration: overline;
}
值 描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 首行缩进
p {
text-indent: 32px; #首行缩进两个字符,因为我记得一个字在页面上的默认大小为16px
}
1
2
3
2
3
# 背景属性
背景颜色
background-color: red;
div{
width: 600px;
height: 600px;
/*background-color: red;*/
/*background-image: url("yeye.jpg");*/
/*background-repeat: no-repeat;*/
/*background-position: 100px 50px;*/ 相对于div标签的,距离左边100px,距离上面50px
background:url("yeye.jpg") no-repeat left center;
/*background-position: right top;*/
}
简写方式,颜色 图片路径 是否平铺 图片位置
background:#ffffff url('1.png') no-repeat right top;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
编辑 (opens new window)
上次更新: 2021/08/10, 00:23:06
- 01
- Python实现对字符串的加解密02-25
- 02
- Python3对大文件中指定字符进行排序再写入到新的文件10-24
- 03
- Ubuntu下配置adb环境连接Android设备进行调试08-17