CSS基础

2020-08-04

Word count: 787 | Reading time≈ 3 min

CSS基础

语法

选择器{
	k:v;
	k:v;
	k:v;
	k:v;
}

/*
	注释内容
*/

引用方式

1、行内样式

在HTML标签里写

2、内部样式

在页面的head里采用<style>写

3、链入外部样式：页面加载时，同时加载CSS样式

1	`<link rel = "stylesheet" type = "text/css" href = "a.css"></link>`

4、导入式（@import）：读取完html文件后加载

写在<style>标签中，且必须是第一句。@import url(a.css);

选择器

1、标签选择器

1
2

p {
}

2、ID选择器

1 2	`# id1 { }`

3、类选择器

1 2	`.class1 { }`

4、通用选择器（通配符）

在初始化时常常使用该选择器将整个网页的边距等去掉

1
2

* {
}

其他组合

在父子间加上一个空格，如下表示设置div元素的p子元素的样式

<div> <p></p> </div>

div p {
}

还有交集和并集，分别使用 . 与 , 进行分隔

伪类

同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”。

1、静态伪类：只能用于超链接的样式

:link 超链接点击之前
:visited 链接被访问过之后

2、动态伪类：针对所有标签都适用的样式。如下：

:hover “悬停”：鼠标放到标签上的时候
:active “激活”：鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

继承与层叠

继承

如文字样式等能够继承，如盒子、定位等不能继承

层叠

层叠性就是css处理冲突的能力。

以下为计算权重的方法，即优先级，实际时分别查看以下有没有定义样式，如果有，比较优先级，如果优先级一致，就近原则（即最后一个进行覆盖）

1、行内样式优先于内部样式，内部样式与链接样式取决于书写先后顺序（后定义覆盖新定义）

2、id选择器>class选择器>标签选择器

3、选择器有权值，使用!important;标记优先级最高

盒子模型

盒子模型如下，即包含外边距（margin）、边界（border）、内边距（padding）和内容的一种模型。

padding

padding为内边距，其区域有背景颜色（与内容区域相同），background-color将填充所有border以内的区域

写法

四个值：上、右、下、左

1	`padding:30px 40px 30px 40px;`

三个值：上、右、下、（左与右一样）

上下、左右

1	`padding:30px 40px;`

margin

注意：<body>标签默认有margin，为8px，因此很多情况下都需要加上以下语句清除margin。

* {
    margin: 0;
    padding: 0;
}

其余操作与padding中差不多

border

边框主要有三个要素：像素（粗细）、线型、颜色

1	`border: 2px solid red;`

Donate

Copyright： Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.