目录
一、样式表
1.行内样式
<body>
<div style="width: 200px; height: 50px; border: 5px solid pink;" >
</body>
2.内部样式
<head>
<title>内部样式表</title>
<style type="text/css">
div {width: 200px; height: 50px; border: 5px solid pink;}
</style>
</head>
3.外部样式
<head>
<title>外部样式表</title>
<link rel="stylesheet" type="text/css" herf="direction:\example.css">
</head>
外部样式表的css文件
div {width: 200px; height: 50px; border: 5px solid pink;}
二、css字体、文本样式
1.字体属性
属性总结如下：
2.文本属性
属性总结如下：
三、css的基础选择器
1.标签选择器
- 指用html标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的css样式。
- 示例代码如下：
<style>
div {width: 200px; height: 50px; border: 5px solid pink;}
</style>
2.类选择器
- 如果要差异化选择不同的标签，单独选择一个或几个标签，可以使用类选择器。
- 类选择器在html中用class属性表示，在css中，以 “.” 显示。
- 命名要有意义，尽量多使用英文字母。
- 示例代码如下：
<style>
.box {width: 200px; height: 50px; border: 5px solid pink;}
</style>
<body>
<div class="box"></div>
</body>
3.ID选择器
- id选择器一般用于页面唯一性的元素上，经常与JavaScript搭配使用。
- 示例代码如下:
<style>
#box {width: 200px; height: 50px; border: 5px solid pink;}
</style>
<body>
<div id="box"></div>
</body>
4.权重
各选择器及其权重：
四、css样式的三大特性
1.层叠性
- 相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决这个问题。
- 原则：样式冲突，遵循"就近原则"，执行离结构近的样式。
- 样式不冲突，不会层叠。
- 示例代码：
<style>
div {color:pink;}
div {color:green;} <!--执行此样式-->
</style>
2.继承性
- 子标签会继承父标签的某些样式（text-，font-，line-，color等）
- 恰当地使用继承性可以简化代码，降低css样式的复杂性。
- 示例代码：
<style>
div {color:red; font-size:18px;}
</style>
<body>
<p>文本颜色</p> <!--p标签的样式继承父元素的样式-->
</body>
3.优先级
当同一个元素指定多个选择器，就会有优先级的产生。
- 选择器相同，则执行层叠性；
- 选择器不同，则根据选择器权重执行。
五、行内元素、块级元素
1.行内元素
常见的行内元素有<span>、<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>等。
行内元素的特点：
- 相邻行内元素在一行上，一行可以显示多个。
- 高、宽直接设置是无效的。
- 默认宽度是它本身内容的宽度。
- 行内元素只能容纳文本或其他行内元素。
2.块元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中最典型的块元素为<div>。
块元素的特点：
- 独占一行。
- 高、宽、外边距及内边距都可以设置。
- 宽度默认是容器（父级宽度）。
- 是一个盒子，里面可以放行内或者块级元素。
3.行内块元素
有几个特殊的标签<img/>、<input/>、<td>，它们同时具有行内元素和块元素的特点。
- 相邻行内元素在一行上，有空白缝隙，一行可以显示多个。
- 默认宽度是本身内容宽度。
- 高、宽、外边距及内边距都可以设置。
4.元素显示模式转换
特殊情况下，我们需要元素模式的转换，比如增加链接<a>的触发范围。
- 转换为块元素：display:block;
- 转换为行内元素：display:inline;
- 转换为行内块元素：display:inline-block;
感谢您的浏览！
811
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
