本文介绍了CSS的基础知识，包括语法规范，如选择器（标签选择器、类选择器、ID选择器和通配符选择器）的使用，以及代码风格。此外，还详细讲解了字体属性和文本属性，并概述了CSS的三种引入方式：行内样式、内部样式和外部样式表。
一.CSS语法规范
主要构成:一个选择器,一个或者多个声明
- 一般写在<head>标签中的<style>标签中
- 属性与属性值之间用冒号:分隔
- 每一组用分号;结尾
二.CSS代码风格
- 展开格式(更直观)
- 样式全部用小写
- 空格规范(冒号: 后面保留一个空格, 选择器和大括号之间也保留一个空格)
三.CSS基础选择器(选择标签用的)
1.标签选择器:标签名称作为选择器
只能选择全部的同类型的标签
2.类选择器:单独选一个或者某几个标签
类名可以自己定义,但是不能用标签的名字
语法: 在标签中加入属性class
口诀:样式点定义,结构类调用,一个或多个,开发最常用
.类名{
属性:属性值;
}可以设置多类名,简单来说就是一个标签有多个名字
多个类名之间用空格隔开
可以节省代码量,统一修改更加方便
3.id选择器
#id{
属性:属性值;
}#后面可以自定义,不可重复
口诀:样式#定义,结构id调用,只能调用一次,别人切勿使用(一次性)
id选择器一般用于页面唯一性元素上
4.通配符选择器
用*星号定义,表示选取所有的标签
*{
属性:属性值;
}四.CSS字体属性
用于定义字体系列,大小,粗细和文字样式(如格式)
字体系列: font-family:'微软雅黑';
font-family:'Microsoft Yahei',Arial;
字体大小: font-size
字体粗细: font-weight
normal , bold , bolder , lighter , number(写上数字就可以了,不需要带单位)
文字样式: font-style
normal , italic(斜体)
复合属性: font: font-style font-weight font-size font-family;
font: italic 700 16px 'Microsoft yahei';
- 顺序不可颠倒
- 不需要设置的属性可省略,但是必须有font-size和font-family,否则不起作业
五.CSS文本属性
1.文本颜色 color:颜色;
颜色可以是预定义的,也可以是16进制,还可以用RGB代码
2.对齐文本
text-align 设置水平对齐方式
center , left , right
3.装饰文本
text-decoration 给文本添加下划线,删除线,上划线
none , underline , overline , line-through
链接a自带下划线,可以取消下划线
4.文本缩进
text-indent 文本的第一行的缩进
em是相对单位,就是当前元素1个文字的大小
5.行间距
line-height 用于设置行高,设置行与行之间的距离
上间距,文本高度,下间距 三者之和=行间距
六.CSS的引入方式
1.行内样式表(行内式)
- 适合于修改简单样式,不推荐大量使用
- 在对应的单个标签中加入style属性即可
2.内部样式表(嵌入式)
- 所有的CSS代码都放在<style>中
- <style>标签理论上可以放在任何地方,但是一般放在<head>标签中
- 没有完全实现结构与样式分离
3.外部样式表(链接式)
样式单独写到CSS文字中,之后把CSS文件引入到HTML页面中使用
- 新建CSS文件,在文件中直接写样式就可以了,不需要写<style>标签
- 在HTML页面中,使用<link>标签引入文件
<link rel="stylesheet" href="css文件路径">
扫一扫
845
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
