DW基础教程（二）

最新推荐文章于 2022-11-30 20:29:11 发布

程序员的朴实无华

最新推荐文章于 2022-11-30 20:29:11 发布

阅读量1.9k

点赞数 5

分类专栏： DW 文章标签： html css

本文链接：https://blog.csdn.net/weixin_57762542/article/details/119891203

版权

DW 专栏收录该内容

5 篇文章 29 订阅

订阅专栏

1.在上一章我们大概了解了什么是html文档，那么在这一章我们将讲解一下css规则，这么为html里添加样式，每个html都有一个样式表，可以用css来设定这些属性涉及到元素显示不同方面，比如文字内容的字体、子号和颜色，元素属性的位置等等。CSS就是一种先选择HTML元素，然后设定选中元素CSS属性的机制。CSS选择符和要应用的样式构成了一条CSS规则。

2.CSS规则是什么呢？

下面我们列表说明，我们举列说明我们把段落标签设为蓝色

HTML代码

<p>这是段落标签</p>

CSS代码

1.p{
2. color: blue;
3.}

浏览器效果图

3.在浏览器打开样式表按F12就可以在浏览器查看HTML结构和CSS样式。

4.完整代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="Untitled-3.css">
</head>
<body>
<p>这是段落标签</p>
</body>
</html>

5.CSS基础语法

CSS是一门编程语言，既然是语言那么就一定有它的语法规则。那么接下来我们就来学习CSS的基础语法规则。

CSS规则由两部分组成：选择符 和声明两部分组成，其中选择符是指你所要改变样式的元素，声明是指你需要设置的样式部分。声明由两部分组成：属性和属性值。

重要说明：CSS和HTML中的符号都是英文状态下的符号，例如规则中的":"冒号和";"分号。

对于上面的基本结构，我们可以做出以下扩展：

6.多个声明包含在一条规则里面

p {
color:blue;/*字体颜色样式*/
font-size: 18px;/*字体大小样式*/

}

7.多个选择符结合在一起

例如：同时给标题标签h1 h2 h3设置同样的样式属性

<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>

8.CSS规则：

h1,h2,h3{ /*选择器之间用,英文状态的逗号隔开*/
color: blue; /*字体颜色样式*/
font-size: 20px;/*字体大小样式*/
}

9.多条规则应用给一个选择符

简单来说就是，多条CSS规则去改变一个元素的样式.

h1,h2,h3{ /*选择器之间用,英文状态的逗号隔开*/
color: blue; /*字体颜色样式*/
font-size: 20px;/*字体大小样式*/
}
h1{
text-align: center;/*文本内容居中显示*/
}

10.对于上面的2条规则，H1标签最后的样式为，字体颜色为蓝色，字体大小为20像素，文本内容居中显示。

程序员的朴实无华

关注

5
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
DW基础教程（二）

1.在上一章我们大概了解了什么是html文档，那么在这一章我们将讲解一下css规则，这么为html里添加样式，每个html都有一个样式表，可以用css来设定这些属性涉及到元素显示不同方面，比如文字内容的字体、子号和颜色，元素属性的位置等等。CSS就是一种先选择HTML元素，然后设定选中元素CSS属性的机制。CSS选择符和要应用的样式构成了一条CSS规则。2.CSS规则是什么呢？下面我们列表说明，我们举列说明我们把段落标签设为蓝色HTML代码<p>这是段落标签</p>.
复制链接

扫一扫