博客主页:爱敲代码的小杨.
✨专栏:《Java SE语法》 | 《数据结构与算法》 | 《C生万物》 |《MySQL探索之旅》 |《Web世界探险家》
❤️感谢大家点赞收藏⭐评论✍,您的三连就是我持续更新的动力❤️
小杨水平有限,欢迎各位大佬指点,相互学习进步!
文章目录
1. 结构与表现分离2. CSS 样式规则3. 引入 CSS 样式表3.1 行内式3.2 内嵌式3.3 外链式3.4 导入式
4. CSS 基础选择器4.1 标签选择器4.2 类选择器4.3 id 选择器4.4 通配符选择器
1. 结构与表现分离
前面我们学习了 HTML 的常用标签,在使用 HTML 标签属性的时候对网页进行修饰的方式存在很大的局限和不足,因为我们所有的样式都是写在标签中,这样既不利于代码的阅读,将来维护代码也非常困难。如果希望网页美观、大方、维护方便、就需要使用 CSS 实现结构与表现的分离。
结构与表现分离:HTML 标签拥有搭建网页的基本结构,不使用标签属性设置显示样式,所有的样式交由 CSS 来设置。
CSS 非常灵活,既可以嵌入在 HTML 文档中,也可以是一个单独的外部文件,如果是独立的文件,则必须以.css 为后缀名。
内嵌 CSS:虽然 CSS 与 HTML 在同一个文档中,但是 CSS 集中写在 HTML 文档头部,也是符合结构与表现分离的。
如今大多数网页都是遵循 Web 标准开发的,即用 HTML 编写网页结构和内容,而相关版面、文本或图片的显示样式都是使用 CSS 控制。
举例:
HTML 与 CSS 的关系如同人的身体与衣服,通过更改 CSS 样式,如人换不同样式的衣服,可以轻松控制网页的表现样式。
2. CSS 样式规则
CSS 样式的具体实现语法:
选择器 {
属性 1 : 属性值1;
属性 2 : 属性值2;
属性 3 : 属性值3;
.....
}
选择器:用于指定需要修改样式的 HTML 标签{}:内部一条或多条声明。每条声明由一个属性和属性值组成,以“键值对”的形式出现。声明:属性是对指定的标签设置的样式属性,例如字体大小、文本颜色等。属性和属性之间用英文冒号 : 连接,多个声明之间用英文分号 ; 进行分隔。
CSS 语法的特点:
CSS 样式中的选择器严格区分大小写,而声明不区分大小写,按照书写习惯一般将选择器、声明都采用小写的方式 多个属性之间必须用英文状态下的分号隔开,最后一个属性后的分号可以省略,但是为了便于添加新的样式最好保留 如果属性的属性值有多个单词组成且中间包含空格,则必须为这个属性值加上英文状态下的引号。 p{
font-family: "Times New Roman";
}
在编写 CSS 代码时,为了提高代码的可读性,可使用 /**/ 来进行注释,例如上面的样式代码可添加如下注释: p{
font-family: "Times New Roman";
/*这是 CSS 注释文本,有利于方便查找代码,此文本不会显示在浏览器窗口中*/
}
3. 引入 CSS 样式表
想要使用 CSS 来修饰网页,就需要在 HTML 文档中引入 CSS 样式表。
CSS 提供了4种引入方式:行内式,内嵌式,外链式,导入式。
3.1 行内式
行内式又称为内联样式,是通过标签的 style 属性来设置标签的样式,基本语法:
<标签名 style = "属性1:属性1值; 属性2:属性2值 ...;"> 内容 标签名>
上述语法中, style 是标签的属性, 实际上任何 HTML 标签都拥有 style 属性, 用来设置行内式. 属性和属性值的书写规范与 CSS 样式规则一样, 行内式只对所在的标签级嵌套在其中的子标签起作用.
示例:
css行内式修改了 p 标签内容样式
p 标签原样式
运行:
上述代码, 使用 style 属性修饰了 p 标签的字体大小和颜色.
【注意】:行内式是通过标签的属性来控制样式的,这样并没有做到结构与样式分离,所以不建议使用。
3.2 内嵌式
内嵌是将 CSS 代码集中写在 HTML 文档的
头部标签中,并且用上述语法中,
该语法中,