html中嵌入css如何选择,CSS三种引入方式和五种选择器

CSS 如何使用？

语法和规范

选择器{

属性名 1:属性值 1;

属性名 2:属性值 2;

属性名 3:属性值 3;

}

一、CSS 的三种引入方式

第一种：行内引入

兔兔吃萝卜

第二种：内部引入方式

div{

color:red;

font-size: 100px;

}

第三种方式：外部引入

此处引用外部文件

兔兔最可爱1

兔兔最可爱2

兔兔最可爱3

兔兔最可爱4

兔兔最可爱5

二、元素选择器

CSS 基本选择器有三种(元素选择器、类选择器、id 选择器)

1.元素选择器

元素名{

属性名 1:属性值 1;

属性名 2:属性值 2;

属性名 3:属性值 3;

}

如果多个相同的元素设置相同的样式，使用此种方式最为合适。

元素选择器

span{

font-size: 30px;

}

兔兔那么可爱/

2.类选择器

.类名{

属性名 1:属性值 1;

属性名 2:属性值 2;

属性名 3:属性值 3;

}

对多个元素设置相同的样式，此时使用类选择器比较合适。

类选择器

.div2{

font-size: 30px;

color: blueviolet ;

}

兔兔最可爱1

兔兔最可爱2

兔兔最可爱3

兔兔最可爱4

兔兔最可爱5

3.ID 选择器

#id 属性名{

属性名 1:属性值 1;

属性名 2:属性值 2;

属性名 3:属性值 3;

}

Id 保证唯一。

ID 选择器

#div5{

font-size: 20px;

color: chartreuse;

}

兔兔最可爱1

兔兔最可爱2

兔兔最可爱3

兔兔最可爱4

兔兔最可爱5

css其他选择器

4.层级选择器

父标签 后代标签{

属性名 1:属性值 1;

属性名 2:属性值 2;

属性名 3:属性值 3;

}

层级选择器

div p{

color: blueviolet;

}

兔兔最可爱

5.属性选择器

标签名[标签属性='标签属性值']{

属性名 1:属性值 1;

属性名 2:属性值 2;

属性名 3:属性值 3;

}

属性选择器

input[type="password"] {

background-color: crimson;

}

用户名：
密码：

欢迎正在学习前端的同学和我交流，共同学习鸭！！

微信公众号：可爱多小姐