1.CSS简介、代码风格
键值对:“属性:属性值”colo:red
多个键值对用;隔开
1.样式格式书写
1.紧凑格式
h3 {color:deeppink;font-size:20px}
2.展开格式,常用
h3 {
color: deeppink;
font-size: 20px
}
2.样式大小写
常用小写
h3 {
colo: pink;
}
3.空格规范
1.属性值前面,冒号后面,保留一个空格
2.选择器(标签)和大括号中间保留空格
p {
color: rgb(67, 59, 219);
font-size: 20px
}
2.CSS基础选择器
基础选择器:标签、类、id通配符
由单个选择器组成,包括标签选择器、类选择器、id选择器、通配符选择器
①标签选择器:标签名{
属性1: 属性值1;
属性2: 属性值2:
...
}
②类选择器1
可单独选一个或者某几个标签
.类名{
属性1: 属性值1:;
}
将所有拥有red类的HTML元素均为红色
.red{
color: red;
}
语法:
<div class='red'>变红色</div>
样式点定义,结构类(class)调用
类命名规则:头:header;内容:content/container;尾:footer;导航栏:nav
侧边栏:sidebar;栏目:column;页面外围控制整体布局宽度:wrapper...
③类选择器2-多类名
使用方式:
<div class="red font20">亚瑟</div>
④id选择器
一般和js搭配使用
语法:
#id名 {
属性1;属性值2;
...
}
注意:id属性只能在每个HTML文档中出现一次,口诀:样式#定义,结构id调用,只能调用一次,别的标签切勿使用
⑤通配符选择器
使用*定义,表示选取页面中所有元素(标签)
语法:
* {
属性1: 属性值1;
...
}
不需要调用,自动给所有未定义元素使用样式;特殊情况才使用
清除所有元素的内外边距:
*{
margin:0;
padding:0;
}
2.CSS字体属性
1.字体系列
font-family定义文本的字体系列
h3 {
font-family: '宋体';
}
p {
/* ''中没有的字体自动往后推,多个单词或中文推荐使用''包含 */
font-family: 'Microsoft Yahei', Times, serif;
}
2.字体大小写
font-size定义字体大小
h2 {
font-size: 35px;
}
p {
font-size: 25px;
}
可以给body指定整个页面文字的大小
标题标签比较特殊,需要单独指定文字大小
3.字体粗细
font-weight:font-weight: bold;
实际使用中一般用:font-weight: 600;控制字体粗细,数据后面不用单位
加粗bold(700),正常:normal(400)
4.文字样式
font-style,语法:
p {
font-style: normal;
}
italic:倾斜样式
注意:平时很少给文字加斜体,反而要给斜体标签(em,i)改为不倾斜字体
5.字体复合属性
用简写的方式写代码:
font:font-style font-weight font-size/line-height font-family
div {
font-style: italic;
font-weight: 700;
font-size: 18px;
font-family: 'Microsoft yahei';
}
简写为:
div{
/* font:font-style font-weight font-size/line-height font-family; */
font: italic 700 18px 'Microsoft yahei';
}
必须按照语法顺序书写,不能更换顺序,各属性用空格隔开
必须要有文字大小font-size和文字主题font-family,否则font属性不起作用
3.css文本属性
可定义文本外观,如颜色、对齐文本、装饰文本、文本缩进、行间距等
文本颜色:color,常用16进制(#ff0000)
对齐文本:text-align,只能设置水平对齐方式text-align:left/right/center
装饰文本:text-decoration,添加下划线、删除线、上划线等,none(默认没有)underline(下划线)overline(上划线,几乎不用)line-through(删除线,不常用)
文本缩进:text-indent,指定文本的第一行缩进,通常是将段落的首行缩进。相对单位em,就是当前元素(font-size)一个文字大小,如果当前元素没有设置大小,则会按照父元素的1个文字大小
行间距:line-height行高,测量工具:
4.CSS的引入方式
1.行内样式表(行内式)
在元素标签内部的style属性中设定css样式,适合于修改简单样式,书写繁琐,不推荐
<p style="color: pink;">花落知多少</p>
2.内部样式表(嵌入式)
写到html页面内部,将所有css代码抽取出来,单独放到一个<style>标签中
<style>
p {
font-size: 20px;
line-height: 8px;
}
.spring {
/* font-weight: bold; */
font-weight: 600;
}
div {
font: italic 700 18px 'Microsoft yahei';
text-align: center;
text-decoration: underline;
}
</style>
理论上可以放到任何地方,一般放在<head>标签中,方便控制整个页面样式,但结构与样式没有完全分离
3.外部样式表(链接式)
样式单独写到CSS文件中,之后再引入到html页面,完全实现样式分离,使用最多,可控制多个界面
1.新建一个后缀名为.css的样式文件,把所有CSS代码放入此文件中
2.在html页面中,使用<link>标签引入文件
<link rel="stylesheet" href="css文件路径">