Css学习总结
CSS是Cascading Style Sheets（级联样式表）
级联: 进行关联
样式表语言:修饰网页外观的语言
Css存在的目的:简化代码量将重复代码提取到Style标签中,进行调用,可将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分。
CSS与HTML的关系:
HTML是网页内容 CSS定义页面的样式
Css存在使用的方式
行内样式表
是通过标签的style属性来设置
元素的样式，其基本语法格式如下：
<标签名 style=“属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”> 内容 </标签名>
<p style = "color:red;font-size:30px;font-family:隶书;">
这个段落应用了样式
<p>
内嵌式
将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义
<style type="text/css">
p { color:red; font-family:"隶书"; font-size:24px;}
</style>
外部样式表
将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中.
<head>
<link href="newstyle.css" rel="stylesheet" type="text/css">
<style type="text/css">
</style>
</head>
新建一个css文件在内部直接写入指定的格式代码
p { color:red; font-family:"隶书"; font-size:24px;}
选择器
要使用CSS对HTML页面中的标签实现一对一，一对多的控制，这就需要用到CSS选择器。
常用的选择器
标签选择器：通过标签选择器可以选择页面中的所有指定标签
语法：标签名 {}
类选择器：通过标签的class属性值选中一组标签
语法：.class属性值{}
.p1{
color: blue;
font-size: 20px;
}
<p class="p1">静夜思</p>
id 选择器：通过标签的id属性值选中唯一的一个标签
语法： #id属性值 {}
<p id="p3">静夜思</p>
#p3{
color: green;
}
选择器组合 通过选择器分组可以同时选中多个选择器对应的标签
语法：选择器1,选择器2,选择器N{}
通配选择器可以用来选中页面中的所有的标签
语法：*{}
选择器的优先级 行内样式表>id选择器>类选择器>标签选择器>通配选择器
文本属性
● color：字体颜色
● font-size：字体大小
● font-family：字体
● text-align：文本对齐
● text-decoration:line-through：定义穿过文本的一条线
● text-decoration:underline：定义文本下的一条线
● text-decoration:none：定义标准的文本
● font-style: italic;斜体文本
● font-weight:字体粗细
● line-height:设置行高
● letter-spacing可以指定字符间距
● text-indent用来设置首行缩进
背景属性
background-color :背景颜色
background-image+背景图片地址
background-repeat 调整背景重复(多数因为背景大,图片小而重复)
background-size : width height背景尺寸
background- position 背景位置
css列表属性
可以放置、改变列表项标志，或者将图像作为列表项标志
- line-style-type 改变列表前列表符号
- list-style-image:+图片地址
- list-style-position 设置列表中列表项标志的位置
css伪类
专门为了改变标签的一种特殊状态,当我们使用伪类可以添加给这些标签一些新的状态.
:hover伪类表示鼠标移入的状态
:active表示的是被点击的状态
:focus向拥有键盘输入焦点的标签添加样式。
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{
text-decoration: none;//超链接去除下划线
}
a:hover{
color: #0000FF;//触碰时字体变色
}
a:active{
color: #FFFF00;//点击时字体变色
}
.text:focus{
background-color: #0000FF;
color: #FF0000; //点击时文本框变色,文本框字体变色
}
</style>
</head>
<body>
<a href="">百度</a>
<input type="text" class="text">
</body>
</html>
透明度
定义透明效果的属性是 opacity。
opacity 属性设置标签的不透明级别 值为1。
规定不透明度：从 0.0 （完全透明）到 1.0（完全不透明）。
img:hover{
opacity: 0.5;// 触碰时图片虚化
}
块级标签
特点: 独占一行,可以调整宽高,高度默认为0,宽度默认为父级标签的宽度
例如<p>、<h1>、<ul>、<ol>、<hr/>标签
行级标签
特点: 只占自身大小,不可以调整宽高
例如<font>、<b>、<i>、<a>等。
行级块标签
特点:不是独占一行,可以改变宽高
例如 <input/> <img>等
注意： 一般情况下使用块级标签包含行级标签，不使用行级标签包含块标签。
a标签可以包含任何标签，除去a本身；
p标签不可以包含任何的块标签 。
Display
通过display属性可以修改标签的类型
可选值：
block ：设置标签为块标签
inline ：设置标签为行级标签
inline-block ：设置标签为行级块标签
none ：隐藏标签（标签将在页面中完全消失）
Div和Span
div: 是块级标签 h1,p也是块,有默认的样式 或其他缺陷, 可以包含任何标签,没有任何的默认样式, 主要用于网页布局
span: 是行级标签 b,i,u也是行级标签,但是有默认样式 没有任何的附加样式, 作用是用来选中网页上的文本,并为文本添加css样式
盒子模型
形象的把每个标签的4个部分这一构造称为"盒子模型"
每个标签由4个部分组成:
1.内容区: 放内容的区域 `
2.内边距: 内容区到边框的距离
3.边框: 墙
4.外边距: 过道
width,height只是设置内容区大小,不是整个标签大小,如果标签没有设置内
边距大小和边框大小,那么盒子大小=内容区大小
标签的大小 = 内容区大小+内边距大小+边框大小
内边距: 内边距指的就是标签内容区与边框以内的空间
/* padding-top 设置内边距 */
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding: 20px; 为上下左右添加内边距
padding: 10px 5px; padding:上下 左右
padding: 5px 10px 15px 20px; padding:上 右 下 左
边框 : 标签的最外层
border-top-color: #FF0000; //边框上色
border-top-width: 1px;
border-top-style: solid; //边框实体化
border-top: 1px solid red ;
border: 1px solid red ; 设置四个方向的边框
border-top-left-radius: 100px;
border-radius: 100px; /* 设置圆角边框*/
外边距 : 外边距是标签边框与周围标签相距的空间。 使用margin属性可以设置外边距。用法和padding类似，同样也提供了四个方向的 。
/* margin-top: 50px;
margin-left: 50px;
margin-bottom: 50px; */
/* margin: 10px; */
/* margin-left: auto;左右设置外边距的值为auto, 外边距会自动为最大值
margin-right: auto;*/
/*margin-top:100px; 上下外边距 只能给具体的数值
margin-bottom: 100px;*/
/* margin: auto; 上下为auto时,值为0*/
margin: 10px auto;
清除浏览器默认样式
在css属性中添加 : outline: none;
浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的标签都设置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉。
*{
margin: 0;
padding: 0;
}
文档流
指标签在网页中排放的顺序,从左至右,从上至下,一个标签接着另一个块级标签各占一行,行级标签一个接着一个,直到一行满为止才开始下一行
浮动
所谓浮动指的是使标签脱离原来的文档流，在父标签中浮动起来
float:
none ：不浮动
left ：向左浮动
right ：向右浮动
块级标签和行级标签都可以浮动，当一个行级标签浮动以后将会自动变为一 个块级标签。当一个块级标签浮动以后，宽度会默认是内容的宽度，所以当漂浮一个块级标签时我们 都会为其指定一个宽度
当一个标签浮动以后，其下方的标签会上移。
浮动会使标签完全脱离文档流，也就是不再在文档中在占用位置标签浮
动以后即完全脱离文档流，这时不会再影响父标签的高度。也就是浮动
标签不会撑开父标签。
清除浮动
clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不
发生变化。
可选值：
left ： 忽略左侧浮动
right ：忽略右侧浮动
both ：忽略全部浮动
定位
允许我们要定位的标签,相对于其原来的位置,另一个标签,或父级标签或浏览器边框分为: 1. 相对定位,2. 固定定位, 3. 绝对定位
相对定位
position: relative(开启相对定位时,如果不给予偏离量标签不会发生任何变化)
left: 50px; //向左偏移50像素单位
相对定位的特点
当标签的position属性设置为relative时，则开启了标签的相对定位
1.当开启了标签的相对定位以后，而不设置偏移量时，标签不会发生任何变化
2.相对定位是相对于标签在文档流中原来的位置进行定位
3.相对定位的标签不会脱离文档流
绝对定位
绝对定位是不占空间的，运用了绝对定位的标签会脱离原来的文档流，浮动起来，因此视觉上会其他的标签重叠。
可以通过position: absolute; 开启绝对定位
left right top bottom四个属性来设置标签的偏移量
绝对定位的特点
1.开启绝对定位，会使标签脱离文档流
2.开启绝对定位以后，如果不设置偏移量，则标签的位置不会发生变化
3.绝对定位是相对于离他最近的开启了定位的祖先标签进行定位（一般情况，开启了子标签的绝对定位都会同时开启父标签的相对定位）
如果所有的祖先标签都没有开启定位，则会相对于浏览器窗口进行定位
4.绝对定位会使标签提升一个层级
5.绝对定位会改变标签的性质，行级标签变成块标签
固定定位
将你指定的标签进行固定定位 position: fixed;
724
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
