CSS01
CSS:用于美化HTML页面
Cascading 层叠 Style样式 Sheet表
ccs的引入方式：
1.内联样式（使用较少）：在标签的内部 通过style属性添加css样式，弊端只能作用一个
元素，不能复用
例如：
<div style="color:red;border:1px solid blue">我是一个div</div>
<span style="background-color:yellow">我是一个span</span>
2.内部样式：在<head>标签中，通过一个style标签引入一个css，可以在当前页面中进行复用，通过选择器找到相对应的标签 把样式加到这个标签上。应用场景比内联要广，但是优先级比内联低，只能在当前页面复用，工作中使用不多，工作中要把样式和HTML代码分离，学习中内部用的多
例如：
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
color:pink;
border:1px solid green;
}
span{
color:pink;
border:1px solid red;
}
</style>
</head>
3.外部样式：通过head标签里面加入<link>标签，把外部的样式文件引入，可以多个页面中复用
<link rel="stylesheet" href="first.css">
css样式优先级：内联样式的优先级最高
后执行的会覆盖前面执行的效果
CSS的选择器：选择器放在style标签中间
标签选择器：
标签名{
样式代码1；
样式代码2；
}
id选择器：
通过id找到相对应的元素（标签）
格式： #id{ }
l例如查找id为d3的元素：
#d3{
border:1px solid blue;
}
类（class）选择器：
格式： .class{ }
通过标签的class属性值选择标签
场景：当页面中需要给多个元素设置相同样式的时候使用类选择器
给class为s1，s2，s4分别设置成绿色，黄色，粉色
.s1{
background-color: green;
}
.s2{
background-color:yellow;
}
.s4{
background-color:pink;
}
标签名 id 类选择器称为基础选择器
属性选择器：属性名【标签名=‘你好’】{ ... }
通过标签的属性名和值找到对应的标签
应用场景：如果需要使用属性作为查找条件时使用
input[type='text']{
background-color:red;
}
input[type='password']{
background-color:pink;
}
派生选择器（后代选择器）：在head中 个条件之间为空格
例如修改id为d1下的class为c1标签名为span的元素颜色：
<style type="text/css">
#d1.c1 span{
color=red;
}
修改id为d2下的类为c2标签为span的元素背景颜色：
#d2 .c2 span{
background-color:red;
}
注：当查询到符合要求的标签是，会匹配所有的后代（子元素，孙元素。。。）
子元素选择器：各元素之间用>连接，则只会差改变符合条件的子类
例如将属性id为d1下的类为c1的span标签字体颜色设置为黄色
#d1>.c1>span{
color:yellow;
}
分组选择器：如果需要对页面中多种不相关的元素设置相同的样式，将每一种选择器的前面通过逗号隔开（也可以加空格使显示更加清晰），然后将所需实现的效果加在大括号内
选择器1，选择器2，选择器3{}
例如：
ul li a, input, .c1>p>span{
background-color: red;
}
伪元素选择器：用来选择元素的状态
1.VISITED:访问过的状态
2.LINK:微电机的状态
3.HOVER:鼠标悬停状态
4.ACTIVE:鼠标点击时的状态
注：hover必须写在link后visited的后面，active必须写在hover后面才生效
按以下顺序写：
<style>
/* 访问过的状态*/
a:VISITED{
color:red;
}
/*未访问过的状态*/
a:LINK{
color:yellow;
}
/* 鼠标悬停状态*/
a:HOVER{
color:blue;
}
/* 点击时的状态*/
a:ACTIVE{
color:pink;
}
</style>
任意元素选择器：给页面中所有元素添加相同的样式可以使用此选择器
/*任意元素选择器*/
*{
border:1px solid red;
}
CCS中常用的属性：
元素的高度：width/height
只能修改块级元素的高度，不能修改行内元素的宽高
元素的颜色赋值：
1. 通过颜色名称赋值
red,yellow,bule,pink...
2. 6位16进制赋值 每两位表示一个颜色 颜色三要素：红绿蓝，前面加#
例如:background-color:#ff0000
3. 3位16进制赋值
例如：background-color：#f00
4. 10进制 通过rgb（255,0,0）赋值
例如：background-color：rgb（255,0,0）
5. 10进制 通过rgba（255,0,0,0~1）最后一个指透明度
例如：background-color：rgba（0,0,255,0.6）；
背景图片：background-image:url=("图片路径 ")
#d1{
border=:1px solid red;
width:500px;
height:500px;
/*添加背景图片*/
background-image: url("../b.jpg");
/* 图片尺寸*/
background-size:300px 300px;
/* 不重复*/
background-repeat: no-repeat;
/*控制图片位置*/
background-position:center right;
/*通过百分比控制位置*/
background-position：right center; left right top bottom center
background-position:75% 75%;
}
布局相关属性：盒子模型
一个元素在页面中所占的宽度如何计算？
左外边距+左边框宽度+左内边距+元素宽度+右内边距+右边框宽度+右外边距
外边距指元素边框距相邻元素或上级元素边框的距离
批量设置外边距：margin: 50px;此标签文本框距相邻元素框上下左右的距离为50
margin:10px 50px;上下为10px，左右为50px；
margin:0px auto;上下为0，左右居中；
margin:10px 20px 30px 40px;分别代表上右下左，顺时针距相邻元素的距离
注：中间用空格隔开，不能用逗号
margin-left:距左的距离
margin-right：距右的距离
margin-top：距顶部的距离
margin-bottom: 距下部的距离
注：对行内元素例如span等标签上下不起作用，左右有效果
两个相邻的元素与的上下外边距取最大值，两个相邻的元素左右外边距是左外+右外
边框：
border:15px groove red;
border-radius:10px;设置边框的圆角
块级元素：四个边框全部生效，都会影响元素所占的范围
行内元素：四个边框全部生效，上下不影响元素所占高度，左右影响元素所占宽度
内边距：内容到边框的距离称为内边距
块级元素的内边距全部生效 会影响元素所占宽高
行内元素的内边距全部生效 只会影响元素的所占宽度 不会影响高度
块级元素和行内元素的关于盒子模型的总结：
1.块级元素：可以设置宽高，外边距全部生效 会影响所占宽高，边框全部生效 会影响所占宽高 ，内边距全部生效会影响所占宽高
2.行内元素：不可以设置宽高 由内容决定 外边距左右生效 上下无效果 边框全部生效 左右影响宽度 上下不影响高度 内边距全部生效 左右影响宽度上下不影响高度
文本相关属性：
文本对齐方式：text-align
center：居中对齐
left：靠左对齐
right：靠右对齐
文本修饰：text-decoration
none： 没有修饰
underline： 下划线
overline ：上划线
line-through：删除线
文本阴影：text-shadow：#0f0 5px 5px 1px；
第一参数是阴影颜色
第2.3为左右和上下的偏移位置，上，左为负
最后一个参数时模糊程度，越小越清晰
文本左右居中：
text-align=center
文本上下居中：
line-height：30px
整个元素居中（包括框）：
margin：0 auto；
字体大小：font-size:20px
字体加粗:font-weight:bold (换成bolder更粗)
设置使用的字体：font-family:"黑体 ";可以同时写入多种字体，一种字体在不同系统上时可能无法显示。多种字体，能用哪种用哪种
图片显示设置：
overflow:溢出，图片显示方式（当图片的大小超过标签大小时）
hidden：超出范围不显示
visible：超出显示（默认）
scorell：超出滚动显示
display：显示，控制元素的显示方式
block：块级元素的默认值
inline：行内元素的默认值
inline-block：行内块
将a标签改为按钮：
a{display:inline-block;
width:132px;
height:40px;
background-color:#0aa1ed;
color:white;
border-radius:5px;
font-size:20px;
text-align:center;
line-height:40px;
text-decoration:none;}
