- A+
所属分类：Web前端
css引入
- 内联样式
<div style="color: red; font-size: 30px;">我是div元素</div> 2.内部样式
<style> /* 找到class为.div-one的元素 */ .div-one { color: red; font-size: 30px; background-color: orange; } </style> - 外部样式
<link rel="stylesheet" href="style.css"> /* 可以通过@import引入其他的css资源 */ @import url(./style.css); @import url(./test.css); .content{ font-size: 16px; } css常见属性
- background-color
- color
- font-size
- height
- height
4和5只对块状元素有效
文本属性
- text-decoration用于设置文字的装饰线
.bing { text-decoration: overline; } .demo{ text-decoration: line-through; } - text-indent用于设置第一行内容的缩进
- text-align定义行内内容（例如文字）如何相对它的块父元素对齐;
<style> .box { background-color: #f00; height: 300px; text-align: center; } .content { background-color: #0f0; height: 200px; width: 200px; /* display: inline-block; */ /* margin: 0 auto; */ } </style> <div class="box"> // 不是块状元素,不生效 <div class="content"></div> </div> 结果如图
字体属性
- font-size 字体大小
.box { /* 字体设置的方式一: px */ /* font-size: 50px; */ /* 了解: em -> 父元素的字体的尺寸 */ /* 字体设置的方式二: em */ /* font-size: 2em; */ /* 字体设置的方式三: 百分比% */ font-size: 200%; } - font-family用于设置文字的字体名称
- 可以设置1个或者多个字体名称;
- 浏览器会选择列表中第一个该计算机上有安装的字体;
- 或者是通过 @font-face 指定的可以直接下载的字体
使用事例
body { font-family: "Microsoft YaHei", "Heiti SC", tahoma, arial, "Hiragino Sans GB", "5B8B4F53", sans-serif; } - font-weight
body{ /* 设置文字的粗细,可以使用px,也可以使用关键字 */ font-weight: bolder; } - font-style 设置文字风格
body{ /* 斜体显示 */ font-style: italic; } - line-height 设置行高(重要)
注意区分height和line-height的区别,前者是元素的高度,后者是文字的高度.
假设div中只有一行文字，如何让这行文字在div内部垂直居中,让行高等于元素高度
.box { height: 400px; background-color: #f00; color: #fff; line-height: 100px; } - font 缩写属性
具体规则如下
常见的选择器
- 简单选择器(元素,类,id选择器)
<style> div { color: red; } .box { color: blue; } #home { color: green; } </style> - 属性选择器
<style> // 包含属性为title [title] { color: red; } // 包含属性为title并且只为div [title=div] { background-color: blue; } </style> - 后代选择器
后代选择器一: 所有的后代(直接/间接的后代) 用空格分隔
<style> /* 后代选择器 */ .home span { color: red; font-size: 30px; } /* .home的子代的span元素设置一个背景 */ .home > span { background-color: green; } </style> - 兄弟选择器
- 交集选择器(两个选择器紧密相连)
div.one 即使div标签同事还有one的类属性 - 并集选择器(,分隔)
div,.onediv标签或者class=one的标签
伪类相关知识
伪类是选择器的一种，它用于选择处于特定状态的元素;例如当手指放在一个元素上时, 显示另外一个颜色;
.box:hover { color: yellow; } a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标挪动到链接上(重要)
a:active 激活的链接（鼠标在链接上长按住未松开）
◼ 使用注意
:hover必须放在:link和:visited后面才能完全生效
:active必须放在:hover后面才能完全生效
所以建议的编写顺序是 :link、:visited、:hover、:active
伪元素
伪元素用于创建新的虚拟元素并样式化，而伪类用于选择已有的元素。
