CSS概念
样式的书写位置
选择器
基础选择器

颜色的显示方式
标签选择器
类选择器
ID选择器
通配符选择器

复合选择器

交集选择器
后代选择器
子代选择器
并集选择器

选择器的小练习
文本元素

字体编码

CSS概念

CSS指层叠样式表或者级联样式表 css是用来美化html标签的，相当于页面的化妆

样式的书写位置

<head><meta charset="utf-8">

选择器

选择器是一个选择谁（标签）的过程

写法

选择器{属性:值;}

属性	解释
width:20px;	宽
height:20px;	高
background-color:red	背景颜色
font-size:24px	文字大小
text-align:left\|center\|right	内容的水平对其方式
text-indet:2em;	首行缩进

基础选择器

颜色的显示方式

直接写颜色的名称

white|red|green

十六进制显示颜色

0-9 a-f 来表示颜色 #000000 前两位表示红色，中间两位代表绿色，最后两位代表蓝色。#cfcfcf当出现#cccccc;可以缩写成#ccc #33ffcc --> #3fc 缩写就是把相同的合并成一位，怎么缩写都只能缩写成3位

rgb

rgb(120, 120, 120);

rgba

rgba(120, 120, 120, 0.5) a代表不透明度，值0 - 1， 1是不透明

标签选择器

标签{属性:值;}<style type="text/css">

类选择器

.自定义类名{属性:值;}1.设置样式

类名的命名规则

不能使用数字开头
不能使用特殊符号开头，_除外
不建议使用汉字来定义类名
不推荐使用属性或者属性的值来定义类名

ID选择器

#自定义名称{属性:值;}

一个ID选择器在一个页面只能使用一次，如果是使用2次或者2次以上是不符合w3c的规范。

一个标签只能调用一个ID选择器

1.定义样式<style type="text/css">

通配符选择器

*{属性:值;}

复合选择器

概念：两个或者两个以上的基础选择器通过不同的方式连接在一起。

交集选择器

标签+类（ID）选择器{属性:值;}

1.定义样式div.box{ /* div中包含class是box */

后代选择器

选择器+空格+选择器 {属性:值;}

特点：无限制隔代

1.定义样式

子代选择器

选择器>选择器{属性:值;}

特点：直接选中下一代

1.定义样式div>span{

并集选择器

选择器,选择器{属性:值;}

1.定义样式

选择器的小练习

通过css去写出对应的html结构
--------------测试一------------------
div.div1 ul.box li, div.div1 p{

文本元素

属性	意义
font-size:10px;	文字的大小
font-weight:700;	文字粗细值是从100-900，不推荐使用font-weight:bold;
font-family:微软雅黑;	字体
font-style:normal;	文字的风格，normal默认，italic 倾斜
line-height:100px;	行高

文本属性的连写

顺序不要改变

字体编码

字体名称	英文名称	Unicode 编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	microsoft yahei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼园	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

cssday前端 (Web前端入门基础day01-07)