目录
一、样式表
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;
感谢您的浏览!