前言:以前一直以为前端最难的是JS,学完JS之后才发现,CSS才是最繁琐的,已经很多东西都记不清了,所有觉得很有必要复习一下啦。本人水平有限,写的不一定全面,有不对的地方还希望各位大牛不吝指教,废话不多说,进入正题。
CSS样式规范
1.选择器是用于指定 CSS 样式的 HTML 标签,花括号内是对该对象设置的具体样式
2.属性和属性值以“键值对”的形式出现
3.属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等
4.属性和属性值之间用英文“:”分开
5.多个“键值对”之间用英文“;”进行区分
基础现择器比较简单,就做个简单的总结!
1.基础选择器总结
2.css字体属性:
1.字体大小
font-size
p { font-size: 20px; }
2.字体粗细
font-weight
p { font-weight: bold; }
3.字体样式
font-style
p { font-style: normal; }
字体总结:
3. css文本属性:
1.文本颜色
color 属性用于定义文本的颜色
div { color: red; }
开发中最常用的是十六进制
2.文本对齐
text-align 属性用于设置元素内文本内容的水平对齐方式
div { text-align: center; }
3.修饰文本
text-decoration
div {
text-decoration :underline
}
重点记住如何添加下划线 ? 如何删除下划线 ?
<a href="" style="text-decoration: none;">删除下划线</a>
<p style="text-decoration: underline;">添加下划线</p>
4.文本缩进
text-indent
div { text-indent:2em; }
em 是一个相对单位,就是当前元素(font-size) 1 个文字的大小, 如果当前元素没有设置大小,则会按照父元素的 1 个文字大小。
5.行间距
line-height 属性用于设置行间的距离(行高)
p { line-height: 26px; }
实际应用中想要文本在盒子里垂直对齐,最常用的就是行高等于高 line-height = height
4.css样式表
1.行内样式表(行内式)
行内样式表(内联样式表)是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式.
<div style="color: red; font-size: 12px;">青春不常在,抓紧谈恋爱</div>
2.内部样式表(嵌入式)
内部样式表(内嵌样式表)是写到html页面内
m,\部. 是将所有的 CSS 代码抽取出来,单独放到一个 <style> 标签中
<style> div { color: red; font-size: 12px; } </style>
3.外部样式表(链接式)
引入外部样式表分为两步:
1.新建一个后缀名为 .css 的样式文件,把所有 CSS 代码都放入此文件中。
2.在 HTML 页面中,使用<link> 标签引入这个文件。例 :<link rel="stylesheet" href="css文件路径">
css引入方式总结
5.css的复合选择器
1.后代选择器 (重要)
语法 :
元素一 元素二 {样式声明}
ul li {样式声明} 选择ul里的所有li元素标签
语法说明
(1)元素1 和 元素2 中间用空格隔开
(2)元素1 是父级,元素2 是子级,最终选择的是元素2
(3)元素2 可以是儿子,也可以是孙子等,只要是元素1 的后代即可
(4)元素1 和 元素2 可以是任意基础选择器
2.子代选择器
语法:
元素一 > 元素二 {样式声明}
div > p {样式声明} 选择div里最近一级的p标签
语法说明:
(1)元素1 和 元素2 中间用 大于号 隔开
(2)元素1 是父级,元素2 是