HTML复习笔记—CSS样式表

最新推荐文章于 2023-10-12 21:13:58 发布

林戊

最新推荐文章于 2023-10-12 21:13:58 发布

阅读量251

点赞数

分类专栏： HTML学习

本文链接：https://blog.csdn.net/LiMaoLin1999/article/details/103324565

版权

HTML学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

CSS——用于设计网页的排版
建立CSS样式表
CSS样式表由选择器与样式规则组成。
所谓选择器，可以是HTML中的标记（最常用），class属性，或者id属性，例如：

h1{color:red}

一个选择器中可以设置多种不同的规则，中间用分号分隔。范例：

<style>
h3{font-size:32px;
line-height:16px;
border:1px #00FF33 solid;}
</style>

应用CSS样式表
三种方式：
1 行内声明，即直接将CSS样式写在HTML标记中。范例：

<body>
<h1 style="font-family:Broadway BT; border:1px #336679 solid;">人世苦短又有几人看破，大梦一场，不过是时间蹉跎，预知后事如何，且听下回分说</h1>
<h1>人世苦短又有几人看破，大梦一场，不过是时间蹉跎，预知后事如何，且听下回分说</p>
</h1>
</body>

2 内嵌声明，在HTML中以< style></ style>标记进行声明，将此样式表放在HTML标头区域。
3 链接外部样式文件，外部文件格式与内嵌声明格式相同，只需省略< style></ style>标记。

CSS选择器
分5种：
1 标记名称——使用HTML标记当作选择器，此后HTML相同标记都应用此一样式，例如；

<div>{font-size:16px; color:#00FFCC;}

2 全局选择器（*）
使用" * "字符来选择所有的标记，例如：

*{font-size:16px; color:#33CCCC;}

3 class选择器，利用此属性可以使样式应用到不同的标记中。
声明格式例如：

.car{font-size:36px;color:#99CCFF;font-weight:bold;}

class选择器中名字自取。如果希望仅在某一种标记上应用class选择器的样式，可以在class选择器之前加上标记名称，范例：

<style type="text/css">
font.txt{
       font-size:32px;
       line-height:16px;
       border:1px #00FF33 solid;}
</style>
</head>
<body>
<font class="txt">The end of the Funking World</font>
</body>

4 id选择器
声明格式:

#id属性名{样式规则；}

范例：

<style type="text/css">
#font_txt{
       font-size:32px;
	   color:#FF6600;
	   font-family:"宋体";
       line-height:16px;
       border:1px #00FF33 solid;}
</style>
</head>
<body>
<font id="font_txt">The end of the Funking World</font>
</body>

CSS样式表的注释是在文字前后加上/*...... */
id名称在同一份HTML文件中是唯一的，class可以重复。