WEB前端-css选择器-常用属性
目录
css介绍
引子：html是网页的结构，css是网页的化妆师，让网页更美观。
网站删除css后会变得横七竖八，加上后又变美观了，这就是css样式的魔力。css就是给网页设置一些样式，让网页变的漂亮，更具有可读性。
css全称为Cascading Style Sheets 翻译过来叫层叠样式表
作用：设置网页的文字（大小，颜色，字体风格，对齐方式等）图片和排版等，简单点说就是给网页化妆
感知css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
width:200px;
height:200px;
background:red;
transition:all 2s ease;
}
div:hover{
transform:rotate(720deg) scale(0.2);
background:green;
}
</style>
</head>
<body>
<div>盒子</div>
</body>
</html>语法
1.构建css的运行环境：在头部加入style标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div>这是一个盒子</div>
</body>
</html>2.选择对应的目标元素，使用大括号
<style type="text/css">
div{}
</style>3.语法：属性：值; 键值对
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{color:red;}
</style>
</head>
<body>
<div>这是一个盒子</div>
</body>css字体、文本属性
css学前小知识：
一张图片的打印出来的实际尺寸是由电子图片的像素和分辨率共同决定的，像素(Pixel)是指构成图片的小色点，分辨率(单位DPI)是指每英寸(Inch)上的像素数量，可以看做是这些小色点的分布密度；像素相同时，分辨率越高则像素密度越大，实际打印尺寸越小，图像也越清晰。
实际尺寸(英寸)=像素/分辨率; 1英寸=2.54厘米; 如一张图片宽为600像素，分辨率为300，那么实际打印宽度为：600/300=2英寸，约为5厘米。
1.字体属性
a) font-size 设置字体的大小
取值方式：数字 + 像素单位px（像素就是一个长度单位）
示意图
多学一招：（1）取值用偶数（2）默认是16px大小（3）字体有多大，看字体的高度
b) font-weight 设置字体的粗细
取值：normal 正常的（400）、bold加粗（700）、bolder(900) 、 100 - 900（字体的粗细没有那么精细，所以很少使用数字）
示意图
在实际工作中 用的最多的就是normal （不加粗）和bold（加粗）
c) font-style 设置字体的风格
取值：normal 默认 显示标准的字体样式 italic 字体倾斜
示意图
d) font-family 设置不同的字体
取值： 宋体、微软雅黑、黑体、。。。等等
示意图
多学一招：
1.不推荐使用一些冷门字体，因为一些冷门字体很多电脑里面默认没有安装，这个时候就会显示不出来。所以实际工作中，默认都是一些主流字体 如宋体 微软雅黑 等。。。
2.字体可以写多组，中间用逗号隔开，显示不了第一个，就找第二个显示
3.字体名称中如果有空格 # $ 这种特殊字符的时候需要添加上引号 中文字体也需要添加引号
2.文本属性
a) 文本修饰
语法：text-decoration:值
取值：
（1）underline下划线
（2）overline上划线
（3）line-through删除线
（4）none没有修饰-----------一般用在a标签上
示意图
b) 文本转换
语法：text-transform:值
取值：
（1）uppercase转换成大写
（2）lowercase转换成小写
（3）capitalize首字母大写
示意图
c) 文本对齐方式
语法：text-align:值
取值：
（1）left左对齐---------------------默认
（2）center居中对齐
（3）right右对齐
示意图
d) 首行缩进
语法：text-indent:值
取值：可以是像素，但是当文字大小发生改变后，也需要重新改变，可以使用em代替，代表字符，会随着文字大小的改变而自动调整
示意图
3.字体颜色
语法：color:"颜色值"
字体颜色示意图
css注释
语法：/*注释的内容*/
css基本选择器
1.标签选择器
通过标签来选择元素，标签{css样式}
示意图
2.id选择器
通过id属性来选择元素，#id名{css样式}
示意图
3.class类选择器
通过class属性选择元素，.类名{css样式}
示意图
Google小案例
案例图示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
span{font-size:180px;}
.blue{color:blue;}
.red{color:red;}
.orange{color:yellow;}
.green{color:green;}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
</html>
多学一招：一个元素可以有多个类名
小案例
小案例效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.fz-30{font-size:30px;}
.red{color:red;}
.green{color:green}
</style>
</head>
<body>
<div class="fz-30 red">这是一个盒子</div>
<span class="fz-30">我是文本</span>
<p class="fz-30 green">段落部分</p>
<a class="fz-30" href="">我是超链接</a>
</body>
</html>
4.复合选择器
a) 标签选择器和类选择器一起使用
需求：给下面的类名叫box的p标签设置字体颜色为绿色
<p class="box">
我是一个段落
</p>
<div class="box">
我是一个盒子
</div>
<p>
俺也是一个段落！！！
</p>
效果图
b) 用多个类名选择一个元素
示意图
c) 给多个元素设置同一种样式，每个元素中间用 ， 隔开:元素1，元素2{css样式}
示意图
3127
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
