1、什么是css
- CSS是层叠样式表的简称,或称CSS样式表或级联样式表;
- CSS是一种标记语言;
- 主要用于设置HTML页面中的文本内容、图形外形以及版面的布局和外观显示样式。
2、CSS的语法规范
- CSS 规则由两个主要的部分构成:选择器以及一条或多条声明。
3、CSS的属性值
常见属性:
注意:
- CSS 标点符号都是英文状态下的
- 每一个样式键值对写完之后,最后需要写分号
4、CSS引入方式
1、内嵌式:CSS 写在style标签中
提示:style标签虽然可以写在页面任意位置,但是通常约定写在 head 标签中
2、外联式:CSS 写在一个单独的.css文件中
<link rel="stylesheet" href="css文件路径">
提示:需要通过link标签在网页中引入
3、行内式:CSS 写在标签的style属性中
<div style="color: red; font-size: 12px;">青春不常在,抓紧谈恋爱</div>
提示:配合js使用
4、CSS 引入方式总结
5、基础选择器
5.1 标签选择器
- 结构:标签名 { css属性名:属性值;}
- 作用:通过标签名,找到页面中所有这类标签,设置样式
注意点:
- 标签选择器选择的是一类标签,而不是单独某一个
- 标签选择器无论嵌套关系有多深,都能找到对应的标签
5.2 类选择器
- 结构:.类名 { css属性名:属性值; }
- 作用:通过类名,找到页面中所有带有这个类名的标签,设置样式
注意点:
- 所有标签上都有class属性,class属性的属性值称为类名(类似于名字)
- 类名可以由数字、字母、下划线、中划线组成,但不能以数字或者中划线开头
- 一个标签可以同时有多个类名,类名之间以空格隔开
- 类名可以重复,一个类选择器可以同时选中多个标签
5.3 id选择器
- 结构:#id属性值 { css属性名:属性值; }
- 作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式
注意点:
- 所有标签上都有id属性
- id属性值类似于身份证号码,在一个页面中是唯一的,不可重复的!
- 一个标签上只能有一个id属性值
- 一个id选择器只能选中一个标签
5.4 通配符选择器
- 结构:* { css属性名:属性值; }
- 作用:找到页面中所有的标签,设置样式
注意点:
- 开发中使用极少,只会在极特殊情况下才会用到;
- 一般用来清除内外边距,如下代码。
6、字体和文本样式
6.1 字体系列——font-family
p { font-family:"微软雅黑";}
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}
- 各种字体之间必须使用英文状态下的逗号隔开
- 一般情况下,如果有空格隔开的多个单词组成的字体,加引号.
- 尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
- 最常见的几个字体:body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }
6.2 字体大小——font-size
p {
font-size: 20px;
}
- px(像素)大小是我们网页的最常用的单位
- 谷歌浏览器默认的文字大小为16px
- 不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小
- 可以给 body 指定整个页面文字的大小
6.3 字体粗细——font-weight
p {
font-weight: bold;
}
- 实际开发时,我们更喜欢用数字表示粗细
6.4 文字样式——font-style
p {
font-style: normal;
}
注意: 平时我们很少给文字加斜体,反而要给斜体标签(em,i)改为不倾斜字体。
6.5 字体复合属性
body {
font: font-style font-weight font-size/line-height font-family;
}
- 使用 font 属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开
- 不需要设置的属性可以省略(取默认值),但必须保留 font-size 和 font-family 属性,否则 font 属性将不起作用
6.6 字体属性总结
7、CSS 文本属性
7.1 文本颜色——color
div {
color: red;
}
补充:
注意:开发中最常用的是十六进制
7.2 文本对齐——text-align
div {
text-align: center;
}
补充:
1、水平居中方法总结 text-align : center
text-align : center 能让那些元素水平居中?
- 文本
- span标签、a标签
- input标签、img标签
注意点:
如果需要让以上元素水平居中, text-align : center 需要给以上元素的 父元素 设置
2、水平居中方法总结 margin : 0 auto
如果需要让div、p、h(大盒子)水平居中?
- 可以通过margin : 0 auto ; 实现
注意点:
- 如果需要让 div、p、h(大盒子) 水平居中,直接给 当前元素本身 设置即可
- margin:0 auto 一般针对于固定宽度的盒子,如果大盒子没有设置宽度,此时会默认占满父元素的宽度
7.3 装饰文本——text-decoration
div {
text-decoration:underline;
}
7.4 文本缩进——text-indent
div {
text-indent: 10px;
}
通过设置该属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。
p {
text-indent: 2em;
}
em 是一个相对单位,就是当前元素(font-size) 1 个文字的大小, 如果当前元素没有设置大小,则会按照父元素的 1 个文字大小。
7.5 行间距——line-height
p {
line-height: 26px;
}
- 数字+px
p {
line-height: 1.5em;
}
- 倍数(当前标签font-size的倍数)
应用:
- 让单行文本垂直居中可以设置 line-height : 文字父元素高度
- 网页精准布局时,会设置 line-height : 1 可以取消上下间距
行高与font连写的注意点:
- 如果同时设置了行高和font连写,注意覆盖问题
- font : style weight size/line-height family ;