CSS层叠样式表入门(1)-基本选择器与样式属性

什么是CSS?

css叫层叠样式表
可以通过字体大小/字体颜色/按钮颜色/背景颜色/文字对齐/图片居中等样式来定义HTML元素

CSS样式类型表

1.内部样式表

分两种:
一种用在head标签中
一种用在body标签中
CSS层叠样式表入门(1)-基本选择器与样式属性

2.外部样式表

分两种:
第一种,样式表(CSS)与HTML文件分离
第二种,通过第三方库引入
CSS层叠样式表入门(1)-基本选择器与样式属性

CSS规则-基本选择器

1.元素选择器(标签选择器)

名称选择器
如:
p标签,p规则-针对HTML文件中所有的p标签
规则有字体大小,颜色等
CSS层叠样式表入门(1)-基本选择器与样式属性

2.属性选择器(ID选择器)

针对某一特定的标签使用

#表示唯一属性名称

ID命名规则:
(1)只能是字母、数字、下划线
(2)只能是字母开头
(3)此ID为整篇HTML文档中的唯一
(4)大小区分,如:aa AA为两个ID
CSS层叠样式表入门(1)-基本选择器与样式属性

3.类选择器(同类选择器)

分类/归类,把想要的归于一类

class属性,如:男一类、女一类

class命名规则:
(1)只能是字母、数字、下划线
(2)只能是字母开头
(3)此ID为整篇HTML文档中的唯一
(4)大小区分,如:aa AA为两个ID

CSS层叠样式表入门(1)-基本选择器与样式属性

4.通用选择器(通配符)

针对于所有标签都是用的
注意:不推荐
*,对全文所有标签

特殊情况使用,如:左对齐,上对齐,全篇顶头对齐
CSS层叠样式表入门(1)-基本选择器与样式属性

CSS常见的样式属性

颜色类的样式

通常说就是单一背景色

背景色的属性值有三种表达方式:
颜色英文名称-red/green
十六进制色-#3d3d3d
rgb或rgba-rgb(0, 70, 255)或rgba(0, 70, 255, 0.5)

CSS层叠样式表入门(1)-基本选择器与样式属性

图像类

backgroud-image
图片铺满整个界面

CSS层叠样式表入门(1)-基本选择器与样式属性
图片不铺满界面
backgroud-repeat可实现平铺、拉伸、缩放
CSS层叠样式表入门(1)-基本选择器与样式属性

文本类

设置字体大小 font-size
设置字体颜色 color
字体种类 font-family-Microsoft YaHei
文本对齐方式text-align(有左对齐、居中、右对齐)
CSS层叠样式表入门(1)-基本选择器与样式属性