css基础

css基础

时隔这么久了,更新一下css的内容,哈哈

css简介

众所周知,网页设计是由html+css+js组成的
今天就了解一下css吧,也就是”网页化妆师”
细致链接

css

css选择器

1
2
3
1.CSS 的选择器是 CSS最基础也是最重要的一个知识点。
2.选择器的权重:谁的权力大,就听谁的,同理,选择器权重也是一样,谁的权重值高,应用谁的
3.用途:用于准确的选中元素,并赋予样式

选择器分类

类(class)选择器:
通过标签的 class 属性 ,选择对应的元素 借助了一个类的概念,一处定义,可以多处使用

id选择器:
通过标签的 id 属性,选择 对应的元素 注意:id选择器唯一

群组选择器:
群组选择器是可以同时选择多个标签的选择器

层次选择器:
层次选择器分为,子代、后代、相邻和兄弟等四种选择器

1
2
3
4
5
6
7
子代选择器:>    eg:.div>ul
后代选择器:一个空格 eg:.div ul
相邻选择器:只能选择与当前选择的标签的下一个,不包括上一个,用+表示 eg:.top+.contont
兄弟选择器:只能选择当前选择器的下面的同一层次的选择器,不包括前面的,用~表示 eg:.top~contont
属性选择器:一般用于自定义 eg:有一个<div class="box"></div> 使用的时候为 .div[class="box"]
分组选择器:用,隔开就行了
伪类选择器:首先是link,其次是hover,然后是visited,然后是actived

选择器优先级

1
2
3
Id选择器 > class 选择器 > 元素选择器

Id选择器:100 > class 选择器:10 > 元素选择器:1

伪类选择器:

1
2
3
4
5
6
7
- link:未访问过的样式

- visited:访问过后的样式

- hover:划过的样式

- active:激活的样式

用法

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
<head>
<style>
.box{
height: 400px;
width:400px;
background: red;
}
.box:hover{
background: skyblue;
}
a{
text-decoration:none;
}
a:link{
color: red;
}
a:visited{
color: yellow;
}
a:active{
color: green;
}
</style>
</head>
<body>
<div class="box"></div>
<a>lalla</a>
</body>

CSS字体/文本

1
2
3
4
5
6
字体font-family
字体大小font-size
字体样式font-style
字体粗细font-weight
字体大小写font-variant
复合样式font

文本常用样式:

1
2
3
4
5
6
对齐方式text-align
首行缩进text-indent
文本线text-decoration
字距letter-spacing
词距word-spacing
行高line-height
---------------- The End ----------------
0%