- 下篇:CSS基础知识 [下]
CSS基础知识 [上]
- CSS 学习
- CSS 引入方式
- 选择器
- 文字属性
- 盒模型
- 盒模型分类
- 盒模型应用
- 盒模型单位
CSS 学习
层叠样式表(Cascading Style Sheets,缩写为 CSS)是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言)文档的呈现。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。文件后缀 .css
- CSS 规则: 选择器 + 一条或多条声明
- 选择器: 需要改变样式的 HTML 元素
- 声明: 由一个属性和一个值组成(属性和值用冒号分开)
CSS 引入方式
-
内联样式(行内样式)
- 直接在标签内设置(
style="...;...;"
中间用;
分开)<p style="color: blue; font-size: 20px;">CSS</p>
- 直接在标签内设置(
-
内部样式(不同页面需要重复写才能生效)
- 在
.html
文件中的<header></header>
里面添加<style></style>
来设置样式.<!--给p标签设置样式,将这个放在<header>内--><style>p{color:blue;font-size: 10px;} </style>
- 在
-
外部样式(推荐使用)
- 当样式需要应用于多个页面时,使用外部样式可以通过改变一个文件来改变整个站点的外观,每个页面使用
<link>
标签链接到样式表, 该标签写在文档的头部,即<header></header>
里.<link rel="stylesheet" type="text/css" href="xxx.css">
rel="stylesheet"
是默认的不许修改href="xxx.css"
引入.css
文件type="text/css"
指示了被链接的文档是一个外部的样式表
- 当样式需要应用于多个页面时,使用外部样式可以通过改变一个文件来改变整个站点的外观,每个页面使用
选择器
- 内部和外部样式中不同样式书写方法
全局选择器
- 可以和任何元素匹配,优先级最低,一般做样式初始化
*{margin: 0; }
元素选择器
- HTML文档中使用的各个元素(img|p|div|body|b)
- 标签选择器: 选择页面上所有这类型的标签,设置样式
img{width: 20px; }
类选择器
-
规定用
class="类名"
+.类名{}
搭配使用, 针对你想要的所有标签使用<p class="title">你好</p><!--设置样式--> <style>.title{color: yellow;font-size: 20px;} </style>
- 注意:
- 类名不可以用数字开头
- 同一个标签可以使用多个类选择器,用空格分开, 例如
class="classone classtwo"
- 类选择器可被多个标签使用
- 注意:
ID选择器
- 针对某一个特定的标签使用,只能使用一次(css中用
#
来定义)<h1 id="title">hello</h1><style>#title{border: 3px dashed green;} </style>
- ID是唯一的
- ID不能用数字开头
- 测试提示:要把
<style></style>
放在<header></header>
内运行或者在.css
中写入然后在.html
中引入.
合并选择器
- 语法:
选择器1, 选择器2 {...}
- 提取共同样式
,减少代码量
css p, div, h1 { font-size: 20px; color: blue; }
文字属性
text-align
: 水平方向对齐方式(left/center/right)line-height
: 设置行高word-spacing
: 设置字间距letter-spacing
: 设置字间距text-indent
: 设置首行缩进text-decoration
: 设置文本装饰text-transform
: 设置字母大小写
盒模型
盒模型:指的是页面上的每个元素都是一个矩形盒子,这个盒子由content
、padding
、border
、margin
四个部分组成.
content
: 内容区域,显示内容padding
: 内边距,内边距是包围内容的透明区域,内边距的背景可以设置背景颜色或背景图片border
: 边框,边框是围绕在内边距和外边距外的边界margin
: 外边距,外边距是指元素边缘与外部元素边缘之间的距离
盒模型分类
-
标准盒模型
box-sizing: content-box;
(默认属性)width
和height
只包含内容(content)的宽度和高度,不包括内边距(padding)、边框(border)、外边距(margin)
-
IE 盒模型
box-sizing: border-box;
width
和height
包含内容(content)、内边距(padding)和边框(border),但不包括外边距(margin)
盒模型应用
div {width: 300px;height: 200px;padding: 20px;border: 10px solid black;margin: 20px;box-sizing: border-box; /* 或者 content-box */
}
- 在此例中,元素的总宽度为
300px + 2*20px + 2*10px = 360px
, 总高度为200px + 2*20px + 2*10px = 260px
盒模型单位
px
(像素): 绝对单位,设置的大小不会改变em
: 相对单位,以父元素的font-size
为基准进行计算,当一个元素没有设置font-size
属性时,其计算值将继承父元素的font-size
值rem
: 相对单位,始终相对于根元素(html)的字体大小来计算