H5学习笔记(三)CSS简介以及常用选择器

CSS简介

层叠样式表 (Cascading Style Sheets) css可以用来为网页创建样式表,通过样式表可以对网页进行装饰。
所谓层叠,可以将整个网页想象成是一层一层的结构,层次高的将会覆盖层次低的。而css就可以分别为网页的各个层次设置样式。

基本语法

CSS的样式表由一个一个的样式构成,一个样式又由选择器和声明块构成。
语法:
选择器 {样式名:样式值;样式名:样式值 ; }

p {
    color:red ; 
    font-size:12px;
}

行内样式

可以直接将样式写到标签内部的style属性中,这种样式不用填写选择器,直接编写声明即可。

<p style="color: red;font-size: 30px"></p>

这种方式编写简单,定位准确。但是由于直接将css代码写到了html标签的内部,导致结构与表现耦合,同时导致样式不能够复用,所以这种方式我们不使用。


内部样式表

可以直接将样式写到<style>标签中。

<style>
p{
    color:red; 
    font-size: 30px;
}
</style>


这样使css独立于html代码,而且可以同时为多个元素设置样式,这是我们使用的比较多的一种方式。但是这种方式,样式只能在一个页面中使用,不能在多个页面中重复使用。


外部样式表

可以将所有的样式保存到一个外部的css文件中,然后通过<link>标签将样式表引入到文件中。

<link rel="stylesheet" type="text/css" href="style.css">

这种方式将样式表放入到了页面的外部,可以在多个页面中引入,同时浏览器加载文件时可以使用缓存,这是我们开发中使用的最多的方式。

选择器

选择器(selector),会告诉浏览器:网页上的哪些元素需要设置什么样的样式。

元素选择器
• 元素选择器(标签选择器),可以根据标签的名字来从页面中选取指定的元素。
• 语法:标签名 { }

类选择器
• 类选择器,可以根据元素的class属性值选取元素。
• 语法:.className { }

我们可以为元素设置class属性,class属性和id属性类似,只不过class属性可以重复拥有相同class属性值的元素,我们说他们是一组元素 可以同时为一个元素设置多个class属性值,多个值之间使用空格隔开

ID选择器
• ID选择器,可以根据元素的id属性值选取元素。
• 语法:#id { }

复合选择器
• 复合选择器,可以同时使用多个选择器,这样可以选择同时满足多个选择器的元素。
• 语法:选择器1选择器2{}

对于id选择器来说,因为ID是唯一的所以不建议使用复合选择器

群组选择器
• 群组选择器,可以同时使用多个选择器,多个选择器将被同时应用指定的样式。
• 语法:选择器1,选择器2,选择器3 { }

通用选择器
• 通用选择器,可以同时选中页面中的所有元素。
• 语法:*{ }

发布了188 篇原创文章 · 获赞 20 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/qq_36154832/article/details/104233684