Css基础语法

最新推荐文章于 2022-03-16 20:52:13 发布

甚也不会

最新推荐文章于 2022-03-16 20:52:13 发布

阅读量360

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_45400340/article/details/109120899

版权

CSS简介

文章目录

第一种设置方式

行内样式：通过标签内置的style属性（不建议使用）

<p style="color:orangered;font-size: 30px;background-color: black;">少小离家老大回，乡音无改鬓毛催</p>

缺点：只能影响一个标签，维护不方便

第二种

编写到head标签中
通过CSS选择器选择到对应标签

第三种

外部样式
CSS编写到外部CSS文件，扩展名必须为css
用link标签映入html文件中
优点：多网页都与可以使用，可以使用到浏览器缓存机制，提高加载速度，用户体验更好

CSS基本语法

选择器
声明块：设置样式
- 由一个一个样式声明组成
- 以冒号分隔，分号结束
```
#header{
	background-color: whitesmoke;
	color: orangered;
	text-align: left;
	
}
```

常用选择器

元素选择器
ID选择器
类选择器
通配选择器

元素选择器

标签名{
}

p{

}

选中所有的p

ID选择器

根据id选择一个元素（id不可重复）

#名字{

}

#red{

}

类选择器

选择一类元素（class属性可重复）
可为一个标签指定多个class，空格隔开

.blue{
color:red;
}

通配选择器

*{

}

选择所有元素

组合选择器

交集选择器

div.red{
			 	color:red;
			 	background-color: black;
			 	font-size: 30px;
			 }

同时满足两个条件，方可应用css
要是有元素选择器，必须要用元素选择器开
d#red，不建议，因为#red已经可以唯一确定一个元素

并集选择器

div,p{
			 	color: red;
			 }

同时选中符合其中一个条件的区域

关系选择器

父子关系：直接包含的关系
- 子元素：
- 父元素
- 祖先元素：直接或间接包含后代元素
- 后代元素：被其他元素所包含
兄弟关系

子元素选择器

              div>span{
                  color:red;}

语法：父元素>子元素
选中父标签直接包含的元素

后代元素选择器

div span{
              	color:blue;
              }

语法：父元素+空格+后代元素

下一个兄弟选择器

 p+span{
			 	color: orange;
			 }

p+span：表示p后面的第一个span

选择下边所有兄弟选择器

 p~span{
			 	color:green;
			 }

选择p后所用的span选择器

属性选择器

[title]{
color:red;
}

选定含有title属性的代码块

[title=“hello”]{
color:blue;
}

选定title="hello"的标签

[title^="abc"]

选择title以”abc“开头的标签

[title$="abc"]

以”abc“结尾的属性标签

[title*="abc"]

含有”abc“结尾的属性标签

伪类选择器

特殊的类：描述元素的特殊状态：第一个子元素，被鼠标点的元素，被鼠标移入的元素
- ：first-child—第一个子类元素
- ：last-child—最后一个子元素
- ：nth-child（n）—第n个子元素（特殊值：n—选中所有；2n/even—选中偶数位元素；2n+1/odd—选择奇数位元素）
以上伪类根据所有子元素排序
- first-of-type
- last-of-type
- nth-of-type
这些标签和上述功能差不多，他是同类型中排序。
- ：not（）—否定伪类
超链接的伪类选择器
- 链接状态：访问过—a：visited；没访问过—a:link;鼠标放上去—a：hover；a：active—鼠标点击
伪元素选择器

页面中一些并不真实的元素，表示特殊的位置
- ：：first-letter{ }：表示第一个字母
```
：：fitst-letter
```
- ：：first-line{}：第一行
- ：：selection{}：选择
- ：：before{}：元素的起始位置
- ：：after{}：元素的最后位置