html选择器定义,8. HTML——定义CSS样式(CSS选择器)

1.几种样式定义:

9.定义CSS样式.png

2.几种样式说明:

(1)HTML标记定义:

例如:

CSS选择器定义方式

body{

background-color: green;

}

h1{

color: white;

background-color: gray;

font-size: 30px;

}

p{

color: red;

background-color: yellow;

font-size: 50px;

}

HTML标记定义

HTML标记定义

(2)class定义:类定义的方式为 .类名{属性:属性值; 属性:属性值...}

例如:

CSS选择器定义方式

/*此处会将div标签下的p标签中的内容一起修改为相同的样式*/

.p{ background-color: red; font-size: 40px}

/*当对父标记的类定义属性后要想对下面的子标记单独定义,需要使用.类名 标记名{属性名:属性值}*/

.p p{background-color: gray; font-size: 60px; color: green}

HTML标记定义

HTML标记定义

(3)id定义:id定义的方式为 #id{属性:属性值; 属性:属性值...}

(4)优先级问题: 以上三种定义方式的属性优先级为id> class> HTML,当同级的选择器对同一个内容操作时会执行离元素最近的属性

(5)组合选择器

例如:

CSS选择器定义方式

h1, h2, h3, h4, h5, h6, .p, #pp{font-size: 50px; color: red}

组合选择器

组合选择器

组合选择器

组合选择器

组合选择器

组合选择器

组合选择器

组合选择器