css基础

CSS基础

 

选择器是CSS找到元素并控制元素样式的条件

Css选择器分为：基础选择器、复合选择器。

基础选择器有：标签选择器、id选择器、class选择器、通配符选择器。

标签选择器：标签名{属性：属性值}；

1. 以标签名为选择器
2. 根据标签名找到元素
3. 可以控制页面上所有的同名元素

类（class）选择器：.class{属性：属性值；}

1. 会选择到整个页面上类名相同的标签
2. 多个选择器可以同时作用在一个标签上
3. 一个类选择器可以同时作用在多个标签上

Id选择器：#id{属性：属性值；}

1. 根据元素的id找到元素
2. 具有唯一性，不像class能重复使用

命名规范

class和id的命名是有规则的

可以使用的字符：

1. 字母、数字、下划线、短横杠
2. 不能以数字开头
3. 不能以短横杠+数字开头
4. 不能使用单个短横杠
5. 不建议使用中文
6. 建议使用有意义的英文单词命名
7. 位置或者功能命名

 

通配符选择器：*{属性：属性值；}

可以选择到文档里所有的元素进行样式控制，但是会降低浏览器的效率，在工作当中不用

 

复合选择器有四种：后代选择器、子代选择器、交集选择器、并集选择器

后代选择器：选择器1 + 空格 + 选择器2 + 空格 + 选择器3 + ...  {属性名 : 属性值; 属性名 : 属性值;  ...}

.father .son {
     color: red;
}

.father .sunzi {
     color: pink;
}

注意点：

1、后面的选择器必须被前面的选择器包含

2、选择器间使用空格隔开

3、后代选择器是作用在后代元素上的

子代选择器：选择器1 + > + 选择器2 + > + 选择器3 + ...  {属性名 : 属性值; 属性名 : 属性值;  ...}

.father > .son {
       color: red;
}

.father > .sunzi {
       color: pink;
}     

注意点：

1、后面的选择器必须被前面的选择器所选中元素的子元素

2、选择器间使用 “>” 连接

3、子代选择器是作用在子代元素上的

4、注意和后代选择器区分

交集选择器：选择器1+选择器2+... {属性名 : 属性值; 属性名 : 属性值;  ...}

div.yanhuo {
           color: yellow;
}

       注意点：同时满足多个选择器的条件的元素才能被控制样式

并集选择器：选择器1，选择器2，选择器3，.... {属性名 : 属性值; 属性名 : 属性值;  ...}

div,h1,p,span,strong {
              color: red;
}

特点：

只要满足任意一个条件就能被影响

1、能作用在很多的元素上

2、选择器间使用 “，” 连接

伪类有很多，最基础的几个就是：link；：hover；：active；：visited；：focus；

a:link

作用：控制a标签的href属性指向的url没有被访问过时的样式

a:link {
color:red;
}

hover

作用：控制元素当鼠标停留在其上时的样式

p:hover {
color:red;
}

Active

作用：控制元素在被激活时的样式

激活：鼠标按下，还未松开时

p:active {
color:red;
}

a:visited

作用：控制a标签的href属性指向的url被访问过后的样式

a:visited {
color:red;
}

focus

作用：控制表单控件在获得焦点时的样式

input:focus {
background-color: red;
}

 

其中：link、hover、active、visited都是锚伪类，当四个伪类都出现对a标签不同状态都控制的时候，要求有先后顺序。

love hate

a:link

a:visted

a:hover

a:active

元素的显示模式：块级元素、行内元素、行内块级元素

块级元素：display：block

特点：

1、会独自占据一整行

2、可以设置有效的宽高

3、子元素默认和父元素一样宽

代表：

div,p,h1-h6...

行内元素：display：inline；

特点：

1、一行上可以显示多个

2、不能设置有效的宽高

3、其宽高是依赖于内容的

代表：

span,strong,em...

行内块级元素：display : inline-block;

特点：

1、一行上可以显示多个

2、可以设置有效的宽高

代表：

img,input...

相互转换

其他转换成块级元素

display:block;

其他转换成行内元素

display:inline;

其他转换成行内块级元素

display:inline-block;