CSS基础（一）

CSS(Cascading style sheet)  层叠样式表：用来对页面添加样式

 

一、CSS的四种导入方式

行内样式： <h1 style=”color:blue;font-size:50px;”>蓝色</h1>

嵌入样式：在head中添加一个style标签

引入样式：创建一个CSS后缀的文件，在head中添加link标签,case是要引入的CSS文 件：<linkrel=”stylesheet”  type=”text/css”  href=”case.css”/>

导入样式:在已有的CSS文件中导入另一个CSS文件

@import url(”b,css”);

 

二、CSS的选择器

标签选择器：选择页面中所有的p标签

P{

Color:red;

}

ID选择器：根据ID选择要修改的标签，每个页面中每个ID都是唯一的。

#ID{

Color：red;

}

类选择器：选择页面上所有class为cla的标签

.cla{

Color:red;

}

交叉选择器：class=hd的p标签，交叉选择器之间无空格

P.hd{
}

子代选择器（父子选择器、包含选择器）：选择id为box的p标签，空格表父子关系

#box p{

}

群组选择器：class为hd，标签名是span，id是two的

.hd，span，#two{

}

通用选择器：选择页面中所有的元素

*{

}

 

三、伪类选择器：选择的是元素的状态

选择id为link的标签，将其设置为当鼠标放在这个标签上时，将其颜色置为红色。

#link:hover{

Color:red;

}

当id为link的标签曾经被访问过时，将其颜色置为紫色；

#link:visited{

Color:purple;

}

 

四、CSS的继承性和叠加性

继承性：子级元素会继承父级元素身上的文字相关样式。

叠加性：不同的选择器给同一个元素添加的不同样式可以同时生效。当添加了相同类 型的样式时，会根据选择器的优先级生效。

 

五、CSS选择器的优先级

无任何干扰条件时，继承的样式<浏览器默认样式<通用选择器<标签选择器<class选择器<id选择器<子代选择器<行内样式。

选择范围越小，选择的越精准，优先级越高。

 

六、行级元素、块级元素

块级元素：

1. 能设置宽高

2. 独占一行，不和其他元素待在同一行

 

行级元素：

1. 不能设置宽高

2. 能和其他行级元素待在一行

3. 常见的行级元素:  a  span  strong   em u

 

行内块级元素：

1. 能设置宽高

2. 能和其他元素待在一行

3. 常见的行内块级元素：img 表单

 

七、CSS控制文字样式

文字水平方向位置：text-align:center/right/left

行高：line-height，文字在行中是垂直居中的

首行缩进：text-indent: 10px;  缩进10像素

大小设为em时em参照文字大小，与文字大小一致

字体倾斜：font-style:italic;

字符间距：letter-spacing：10px；

字体粗细：font-weight:700;//加粗

 

*网页开发三部曲（静态网页）

1. 根据内容选标签，将内容放到页面中

2. 给元素加样式

3. 给元素定位置