一、CSS简介
1.1 HTML的局限性
HTML只关注内容的语义,呈现网页的结构。
1.2 CSS语法规范
CSS主要由两个主要部分构成:选择器以及一条或多条声明。
给谁改样式 {改什么样式}
1.3 CSS代码风格
①紧凑格式:一行写完;
②展开格式:分行写;
③样式大小写:用小写;
④空格规范:属性前冒号后以及选择器和大括号中间保留一个空格。
二、CSS选择器
选择器分为基础选择器和复合选择器两大类。
2.1 作用
根据不同的需求选择不同的标签。
2.2 基础选择器
①标签选择器:用HTML标签名作为选择器。
标签名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
优点:能快速为页面中的同一类型统一设计样式;
缺点:不能进行差异化设置,只能全部选择。
②类选择器:单独选一个或几个标签。
.类名 {
属性1: 属性值1;
...
}
/*在需要设置样式的标签里面添加class=‘类名’即可调用*/
注:1、类名自定义,但不能用标签名作为类名,也不能用纯数字、纯中文。
2、 多类名:在标签class属性中写多个类名,类名之间用空格隔开。
口诀:样式点定义,结构类(class)调用,一个或多个,开发最常用。
③id选择器:一次只能选择一个标签。
#id名 {
属性1: 属性值1;
...
}
/*在标签里面添加id='id名'即可调用*/
口诀:样式#定义,结构id调用,只能调用一次,别人切勿使用。
④通配符选择器:选取页面中的所有元素(标签)。
* {
属性1: 属性值1;
...
}
/*不需要调用,自动给所有元素使用样式*/
2.3 基础选择器总结
三、 CSS字体属性
3.1 字体系列
标签名 {
font-family: "字体";
}
注:1、字体可以指定多个,谁在前且系统有就使用谁。
2、各种字体之间必须使用英文逗号隔开,如果单词有多个空格要加引号。
3.2 字体大小
标签名 {
font-size: 20px;
}
/*px像素(大小)单位*/
注:标题标签比较特殊,需要单独指定大小。可以给body指定整个页面的大小。
3.3 字体粗细
标签名 {
font-weight: 700/bold;
}
/*英文和数字都可实现加粗的效果,更提倡使用数字*/
注:100-900来定义粗细,normal/400表示正常粗细,后面不跟单位。
3.4 字体样式
标签名 {
font-style: normal/italic;
}
/*normal正常 italic斜体*/
3.5 字体复合属性
标签名 {
font: font-style font-weight font-size/line-height font-family;
}
注:1、不能随意更改顺序,各个属性之间用空格隔开;
2、font-size和font-family属性不可省略,其他可省略(为默认值),否则将不起作用。
四、CSS文本属性
CSS Text(文本)属性定义文本外观,比如颜色、对齐、装饰、缩进、行间距等。
4.1 文本颜色
color 属性用于定义文本颜色。
标签名 {
color: red;
}
十六进制表示形式 #ff0000 红色;RGB代码 rgb(255,0,0);预定义的颜色值:red、green等。
4.2 对齐文本
text-align 属性用于设置文本内容的水平对齐方式。
标签名 {
text-align: center;
}
/*left左对齐(默认) center居中对齐 right右对齐*/
4.3 装饰文本
text-decortion 属性规定添加到文本的修饰,可以给文本添加下划线、删除线、上划线等。
标签名 {
text-decoration: none;
}
/*none无装饰(默认) underline下划线 line-through删除线 overline上划线*/
4.4 文本缩进
text-indent 属性指定文本第一行的缩进,通常是将段落的首行缩进。
标签名 {
text-indent: 10px/2em;
}
/*2em 表示两个文字的距离*/
注:em表示当前文字大小,是一个相对单位。
4.5 行间距
line-height 属性可以控制文字行与行之间的距离。
标签名 {
line-height: 26px;
}
注:行间距=上间距+文本高度+下间距。
五、CSS引入方式
5.1 内部样式表(嵌入式)
将 CSS 代码写在 HTML 页面内部,单独放到一个<style>标签中。
注:<style>理论上可以放到任何位置,一般放在<head>标签中。
5.2 行内样式表(行内式)
又称作内联样式表,在元素标签内部的 style 属性中设定 CSS 样式,适合修改简单样式。
<p style="color: red">行内样式表</p>
5.3 外部样式表(链接式)
样式单独写到 CSS 文件中,再将 CSS 文件引入到 HTML 页面中,适用于很多样式。
/*引入格式*/
<link rel="stylesheet" href="css文件路径" />