什么是css
CSS样式定义 - TOP 简单地讲,CSS样式全称为Cascading Style Sheets,中文翻译为“层叠样式表”,平时使用CSS布局美化网页，又可称之为CSS样式。而CSS就是Cascading Style Sheets英文单词开头字母缩写
CSS作用
美化标签，布局。
网页有三层结构
结构层：html
样式层：css
行为层：js
写CSS有三个地方
1）在外面新建一个out.css，然后在html中通过link标签引入，做项目时通常都是外部引入
2）内部引入 创建一个style标签，把样式写在style标签中，学习时就使用这一种
3）把样式写在开始标签中的style属性中
<link href="./out.css">
<script src="./out.js">
引入css的三种方式
(1).行内样式
就是直接在标签里面添加style属性
(2).内部样式
直接使用style标签完成，请注意，style标签应写head里面，不要写在body里面。
(3).外部样式
分两步：
1，将css作为一个单独的文件来保存，一般后缀为.css
2,使用link标签将样式引入
CSS的基本语法
CSS样式（或规则）都必须有两部分组成：
选择器+一堆的属性（样式）
选择器（selector）
声明块（declaration）,里面包含若干个声明，每个声明用分号隔开，最后一个声明可以不加分号，每个声明由属性名和属性值组成，属性名和属性值中间用冒号隔开。
注意：
1，声明块由{}构成的
2，声明块之间由若干个声明，声明之间用分号隔开，最后一个声明可以不用分号
3，声明的属性名和属性值之间用冒号隔开
4，在写这些符号时，一定是英文符号
css选择器
（1）基本选择器
1. 标签选择器：直接选中所有的标签标签选择器也叫做类型选择器，或元素选择器
2. ID选择器：先给标签起名字，通过#idname选中，给多个标签起上相同的id名，是OK的但是不推荐，一般id是唯一的 ID选择器要使用ID选择器，需要分成两个步骤：
第一步：需要在对应的标签中打上一个id属性
第二步：在CSS中，通过#id属性值，选中，使用
3. CLASS选择器：先给标签起名字，通过.classname选中class选择器
class是班级的意思，在计算机语言中，它表示类，类别的意思。
有的书上也叫做类选择，使用类选择器，也有两个步骤：
第一步，需要在对应的标签上面写上一个class，并写上对应的属性值
第二步，在css规则中，使用.classname，就可以选中了
注意细节：
1，所有标签都可以添加class属性
2，对于不同的标签，如果它们需要有相同的样式时，这个时候，使用class最合适
3，对于相同的标签，但是在页面中，特别多，我们只需要给某一部分标签添加额外样式，也应该使用class。
4，class属性的值，可以有多个，如果有多个，使用空格隔开。
（2）其它选择器用法
1.通配选择器
使用通常配符（*），表示选中所有标签（元素）
2.分组选择器
在书写CSS时，有可能对两个不同的标签，class， id设置相同的样式，这个时候，就可以使用分组选择器。
3.后代选择器
.war .header
.war .header .main
4.伪类选择器
我们之前学过类选择器，也叫class选择器。我们现在学的是伪类选择器，是指在页面中不存在一个真实的类class=”xxx”, 我们也可以通过某种方式选中它，这就是伪类选择器。
目前我们就只需要掌握一个伪类选择器，也是最常用的，就是a标签的hover伪类。
hover,表示将鼠标放到a链接上面的一个状态
a:hover
css属性
CSS属性本身有很多，有120种之多，但是真正用到的也就不到30个。
css属性值
不同的属性，有不同的值，但是我们可以找到这些属性值的共性。
(1).颜色值
通常有三种表示方式：
1，颜色名，也就是英文名，如red, blue, green等等
2，使用十六进制表示，一共有六位数，每两位表示一种颜色，前两位表示红，中间两位表示绿，后两位表示蓝色。如果两们数相同，我们只可以只写一位。三原色（rgb）
3，使用rgb函数表示，使用的不多
rgb三原色：三基色：分别表示红绿蓝，red, green, blue
rgb函数，它的取值范围是0~255
(2).长度单位
在CSS中，主要有如下两个：
1，px，表示像素，大部分都是使用px
2，em，表示字体高度，一般会在设置text-indent时用到
(3).URL
统一资源定位符，Uniform Resource Location
绝对的URL：在线的某个资源，是以http打头的完整路径
相对：./ ../
(4).百分比
使用n%这种形式来设置，在CSS中，一般有如下两处：
表示长度（包括宽和高）
表示位置，旭背景定位以层定位时用到
字体设置
和字体设置相关的有如下几个属性：
1.font-family 字体种类
2.font-size 设置字体的大小
3.font-style 是斜体还是正常的
4.font-weight 是粗体还是正常的
5.color 用来设置字体的颜色
文本设置
(1).text-decoration
decoration: 修饰的意思 作用：用来设置文本的修饰线。
常见有如下几种：
underline：上划线
overline：下划线
line-through：中划线
none：没有
(2).text-indent
indent是缩进的意思 作用：用来缩进文本的
在实现段落缩进时，我们用到em这个单位，em表示字体的高度，对于中文来说，文字是正方形的，所以宽度和高度一样。
text-indent: 2em; /2em在默认情况下是32px
text-indent: 20px; /em 字符单位 px像素单位/首行缩进
(3).text-align
align是对齐的意思作用：设置文本的水平对齐方式。
常见的属性值有：
left 默认值
center 居中对齐
right 右对齐
Justify 只对英文有效，两端对齐
text-align: center; /文本对齐方式/left、right
text-shadow: 5px 5px 2px yellow;/ 阴影
overflow: hidden;溢出隐藏
text-overflow: ellipsis;溢出内容以省略号的形式显示
(4).line-height
作用：设置行高。 line-height=20px
CSS的继承性
继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。换句话说，就是特定的CSS属性向下传递到子孙元素。
注意：并不是所有的属性都会被后代元素所继承。
可以继承的常用属性有：
font-family
font-size
font-style
font-weight
font
line-height
text-align
text-indent
color
CSS的层叠性
1.通过不同方式选择n种标签时有不同的样式，对于行内，内部，外部，三者的优先级如下：
行内>内部=外部 , 用四个字概况就是：就近原则
2.在三种基本选择器，优先级又是怎么样的？
结论：ID>CLASS>P
选择器的特殊性：
id选择器：0 1 0 0
class选择器：0 0 1 0
标签选择器： 0 0 0 1
结论：
1，行内>内部=外部 （就近原则）
2，ID>CLASS>P
3，特殊值（钱）
4，钱一样多时，使用就近原则
5，!important可以改变优先级（暂时先不说，实际应用比较少）
CSS4布局思路及核心知识点
布局思路：
思考网页的信息语义和结构。根据这些信息把一个网页分成不同的内容块，以及每块内容的目的，然后再根据这些内容的目的用不同的语义元素建立相应的HTML结构。
核心知识点：
1.盒模型 （流动布局） 按照标准文档流的布局
按照标准文档流进行的布局就是流动布局。流动布局是默认的布局方式，也是最简单的布局方式。
block自上而下以行的形式占据
inline从左到右超出一行换行
2.浮动 （浮动布局） 脱离标准文档流 脱标
2.1什么是浮动？
脱离了标准文档流，标准文档流内的各种规则就不在适用。 浮动是用来布局，使得块级元素可以并排显示， 浮动元素并没有完全脱离标准文档流，仅仅半脱离
2.2.浮动的作用？
浮动是用来布局，使得块级元素可以并排显示，在同一行上和平共处想让块级标签可以并排显示。使用浮动就可以让块级标签并排显示了。 浮动可以让行内标签变成块级标签，说白了，一个行内标签浮动了，它就成了块级标签，也就是可以设置宽度和高度了。
如何解决高度塌陷（如何清除浮动元素对父元素造成影响）：
1，给父元素加高度，加高法
2，给父元素加上一个overlflow:hidden
3.clear:both
overflow: hidden;本职不是用来清除浮动的，本职工作是用来处理溢出。
多行文本溢出隐藏
overflow: hidden;溢出隐藏
text-overflow: ellipsis;内容以省略号的形式显示
属性：float
属性值：left right
浮动有很多的特点：
A，破坏性
B，字围性 浮动半脱离标准文档流
C，包裹性 如果一个块级元素浮动了，在没有设置宽高时，宽高就是内容宽高
D，让行级标签变成块级标签 一个行级元素浮动了，就可以设置宽高了
E，贴靠性
F，造成影响（对父元素的影响，对兄弟元素的影响） 加高法 overflow:hidden clear:both 伪元素
浮动有三大特点，四大表现
特点：包裹性，破坏性，块级框
表现：脱标，贴靠，字围，收缩
3.定位（层布局）
通过定位来实现，定位也是CSS中的一个属性，叫position。
static 默认值 不定位
relative 相对定位 相对于它本身应该出现的位置
absolute 绝对定位 是根据参考点进行定位
fixed 固定定位 浏览器窗口
z-index:如果多个元素都绝对定位，有可能重叠到一起了，可以通过z-index来改变它们的前后顺序。
4.flex布局
flex布局四大概念：
容器：如果给一个盒子加上了display:flex，这个盒子就是一个容器。
项目：容器中的直接子元素就是项目
主轴：默认情况下，项目在是主轴上进行排列的，主轴默认是水平向右的
交叉轴：和主轴垂直的那个轴叫交叉轴
容器中的属性：
flex-direction 改变主轴的方向
flex-wrap 控制容器中的项目是否换行
flex-flow 是flex-direction 和 flex-wrap的复合属性
justify-content 处理主轴上的富余空间
align-items 设置项目在交叉轴上的位置
align-content 如果有多根主轴，设置垂直方向上的富余空间
项目中的属性：
order 改变项目中主轴上的顺序。 值越大越主轴的终点。
flex-grow 分配富余空间的
flex-shrink 设置压缩比例 了解就OK
flex-basis 设置项目在主轴上占据的大小
flex flex:1 表示项目均匀分配富余空间
align-self 单独去设置某一个项目的对齐方式
盒模型概念
(1）什么是盒子模型？
HTML标签都是矩形的，像一个盒子，我们可以通常上面6大属性来控制这个盒子的外观，那么这个矩形就是盒子模型。
专业一点定义：
CSS定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边界、边框、补白、内容区域、背景（包括背景颜色和背景图片），这就是盒模型。
盒模型常见的属性：
width:用来设置盒子内容的宽度
height:用来设置盒子内容的高度
padding:用来设置盒子的内边距，指内容与边框之间的距离
border:用来设置盒子的边框
margin:用来设置盒子的外边距，指边框到另一个盒子外边距的距离
(2）盒子模型中的属性的基本用法？
1, width和height
它们是表示元素的宽度和高度。不是指盒子的宽度和高度。
盒子的宽度：
width+padding-left+padding-right+border-left+border-right+margin-left+margin-right
盒子的高度：
height+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom
2, border
表示盒子边框， 由三部分组成：
边框的粗细
边框样式
边框颜色
border：10px边框的粗细 solid边框样式 red边框颜色
border-style的设置
表示边框的样式，有如下几个属性值：
solid 实线
dotted 点画线
dash 虚线
none 没有
border-top：上边框
border-right：右边框
border-bottom：下边框
border-left：左边框
3.padding
表示内边距，或补白， 是指内容区域到border间的距离。
写一个padding，就意味着是四个方向的内边距。如果我们想设置某个方向上的内边距，padding又可以分为四个子属性：
padding-top：内容距离上边框
padding-right内容距离有边框
padding-bottom内容距离下边框
padding-left内容距离左边框
设置padding时，可以按照上，右， 下，左的顺序来设置四个方向的padding
padding:20px 50px 20px 30px;
关于padding有四种写法：
1，一个值：上， 右， 下， 左都相同
2，有两个值： 第一个值表示上，下， 第二个值表示左， 右
3，有三个值： 第一个值表示上， 第二个值表示右， 左， 第三个值表示下
4，有四个值： 第一个值表示上， 第二个值表示右， 第三个值表示下，第四个值表示左它们用空格隔开。
4.margin
用来设置外边距
marign-top
marign-right
marign-bottom
marign-left
margin也有四种写法，如下：
当后面是一个值时：上，右，下，左的marign都一样
当后面是二个值时：第一个值表示上，下， 第二个值表示右，左
当后面是三个值时：第一个值表示上，第二个值表示右，左，第三个值表示下
当后面是四个值时：第一个值表示上， 第二个值表示右，第三个值表示下，第三个值表示左
兄弟重叠取大优先，父子重叠给父加paidding或者border
5.background设置盒子的背景。
包含两部分：
背景颜色background-color: red;背景颜色 默认值transparent, 透明的
背景图片background-image:url();背景图片 默认值none
repeat, 也是默认值，在水平和垂直方向上都平铺
no-repeat, 完全不重复， 有且只有一张图片
repeat-x, 在水平方向上平铺
repeat-y, 在垂直方向上平铺（向下为正）
background-repeat: no-repeat;平铺
background-position:right 20px bottom 20px;写了一个方向的位置移动 另一个方向默认居中
background-position: center;背景图片位置 默认left top
background-attachment
作用：定义背景图片是随着元素的滚动还是固定
有两个值：
scroll 表示背景图片会随着滚动条的滚动而滚动
fixed 固定
元素分类
块级元素：
表格元素
非表格元素
div
h
p
ul li ol li dt dd dl
form
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
行元素：
完全行级（真正的女人）元素
span
a
em和strong
b和 i
label
button
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
行内块元素（人妖）
img
Input
内联块状元素（行内块元素（inline-block）就是同时具备内联元素、块级元素的特点，代码display:inline-block就是将元素设置为内联块状元素（行内块元素）
<img>、<input>标签就是这种内联块状标签。
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
可以通过修改display属性来切换块级元素和行内元素
块级：6大属性都起作用
行级：widht和height没作用，margin和padding的垂直方向没作用，其它都有作用
行内块： 6朋属性都起作用，就是不能独占一行
display: inline-block; /元素转为行内块元素
display: block;/元素转为块级元素
把span变成下拉菜单
width: 0;
height: 0;
border-top: 5px solid red;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 0;
overflow属性
overflow：溢出的意思
作用：用于处理内容溢出的情况
有如下四个属性值：
visible: 表示可见的, 默认
hidden：表示隐藏
scroll：生成一个滚动条
auto：自动
overflow: hidden;溢出隐藏
text-overflow: ellipsis;溢出内容以省略号的形式显示
overflow: hidden;/隐藏超出部分
。
此总结为学习任务，重复及不足请忽略！
1345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
