欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS笔记 1.CSS基础语法

程序员文章站 2022-06-06 20:01:40
...

CSS的作用:把html的风格和内容分开(分层设计)

1.CSS的基本语法:选择器

1.元素选择器:在顶端的style添加 p{color:red}
2.id选择器

<style>
p{
#p1{样式}
#p2{样式}
}
</style>

正文:

<p id="p1" > 正文 </p>

3.类选择器

<style>
.p1{样式} 
.p2{样式}
</style>

正文:

<p class='p1'>

4.在元素上增加style属性:

<p style = "color blue"> 蓝色字体</p>

5.以上的优先级关系为:优先使用html文件中最后出现的一个
优先使用元素上增加的style属性 而非类表示的属性
如果类属性后面加入important关键字 则样式将会采用这个重要的样式。

.p1{color:red !important;}

6.还可以把样式写在style.css中
然后在html前面包含这个链接 就可以用这个链接来使用css:

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

其中:
link:连接,表示引入外部文件。
href=“style.css”:表示路径。
rel=“stylesheet”:relationship的缩写,含义为关系,即当前页面与页面的关系;
而stylesheet由style(样式)和sheet(表格),合起来就是样式表,描述了当前页面与href所指定文档的关系。
type=“text/css”:表示了外联文档的类型为css。

相关标签: 前端入门