您的位置：首页 > Web前端 > HTML5

【HTML5学习笔记】15：CSS初探

2017-06-12 22:56 555 查看

CSS层叠样式表，用来对HTML文档外观的表现形式进行排版和格式化。

几个名词

①层叠：同一个元素通过不同方式的设置产生的样式叠加或冲突覆盖。优先级从低到高为浏览器样式<外部引入<文档内嵌<元素内嵌。用!important可以强制为最高优先级。

②继承：一个被嵌套的元素得到它父元素的样式。样式继承只适用于元素的外观(文字、颜色、字体等)，而元素页面上的布局样式不会被继承。如果要继承这种样式，就必须用强制继承inherit。

③浏览器样式：元素本身就具有的样式。

CSS属性和属性值是以键值对的形式来写的，属性:属性值，以分号分隔不同的键值对。

创建CSS有三种方式：①元素内嵌样式，②文档内嵌样式，③外部引入样式。

很多时候大量的html页面使用同一组CSS，所以上面的③用得最多。

*index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>CSS入门</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css"><!-- 调用外部的CSS -->
<!-- <style type="text/css">
p{
color: green;
font-size: 30px;
}
</style> -->
</head>

<body>
<p style="color: red;font-size: 20px;">元素内嵌的样式(行内样式)</p>
<!-- <p>文档内嵌样式</p> -->
<p>外部<b>引用</b>样式</p>
浏览器样式：<br>
<b>b元素本身隐含加粗</b>
<br>
<span style="font-weight: bold;">span元素没有隐含加粗，但可以设置它</span>
<br>
<b style="font-weight: normal;">去除这个b元素隐含的加粗样式(冲突)</b>
</body>
</html><!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>CSS入门</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css"><!-- 调用外部的CSS -->
<!-- <style type="text/css">
p{
color: green;
font-size: 30px;
}
</style> -->
</head>

4000
<body>
<p style="color: red;font-size: 20px;">元素内嵌的样式(行内样式)</p>
<!-- <p>文档内嵌样式</p> -->
<p>外部<b>引用</b>样式</p>
浏览器样式：<br>
<b>b元素本身隐含加粗</b>
<br>
<span style="font-weight: bold;">span元素没有隐含加粗，但可以设置它</span>
<br>
<b style="font-weight: normal;">去除这个b元素隐含的加粗样式(冲突)</b>
</body>
</html>

*style.css

@charset "utf-8";
@import "test.css";
p{
color:blue;
font-size: 30px;
border: 1px solid red;/*给元素加外边框*/
}
/*可以用@import导入其它CSS文件，但不如写多个link*/

*test.css

@charset "utf-8";
b{
font-style:italic;/*倾斜*/
border:inherit;/*强制继承其父标签的border属性*/
}

运行结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航