前端基础---CSS
CSS的概念：
CSS （层叠样式表）： Cascading Style Sheets
是一种 用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）
等文件样式的 计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地 对网页各元素进行格式化。[1]
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
CSS语法规则：
选择器 + 声明 ===>> selector {color:red; font-size:14px }
CSS的应用方式：
方式 1 行内式： 在标记的style属性中 设定CSS样式。
<p style='color:red'> hello </p>
这种方式 没有体现出CSS的优势，不推荐使用。
方式 2 嵌入式： 嵌入式是将CSS样式集中 写在网页的<head>里的<style>中
<head>
<meta charset='UTF-8'>
<title> hello</title>
<style>
div{
}
</style>
</head>
<div> hello </div>
<div> hello </div>
方式 3 引入CSS文件： （连接式） 将一个.css文件引入到HTML文件中
demo.css 文件中 写 p{
backgroudcolor:red
}
<link rel='stylesheet' href='demo.css'>
方式 4 @import 导入：（导入式）
<style>
@ import 'demo.css' # 加载的顺序 先加载 标签 然后 加载css文件(可能没有完全加载)
</style>
使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，
它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点
CSS的选择器：
===== 基本选择器 =====
1 标签名选择器 elements | p {} div{} |
2 id 选择器 (唯一) | #idname {} | 只能定位一个
3 class 选择器 (同一类) <p class='item'> p1 </p> |.item{}|
4 通配选择器 * |*{}|
======= 组合选择器 =========
E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 :div,p { color:#f00; } E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 :li a { font-weight:bold;｝ E > F 子元素选择器，匹配所有E元素的子元素F :div > p { color:#f00; } E + F 毗邻元素选择器 向下匹配 匹配所有紧随E元素之后的同级元素F :div + p { color:#f00; } E ~ F 普通兄弟选择器 向下匹配（以破折号分隔） :.div1 ~ p{font-size: 30px; }
伪类：
1 anchor伪类：专用于控制链接的显示效果
a:link（没有接触过的链接）,用于定义了链接的常规状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
伪类选择器 : 伪类指的是标签的不同状态:
a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .top{ background-color: rebeccapurple; width: 100px; height: 100px; } .bottom{ background-color: green; width: 100px; height: 100px; } .outer:hover .bottom{ background-color: yellow; } 注意:一定是outer:hover 控制outer里某一个标签,否则无效 .top:hover .bottom{ background-color: yellow; } </style> </head> <body> <div class="outer"> <div class="top">top</div> <div class="bottom">bottom</div> </div> </body> </html>
2 before after伪类
:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容
例：p:before{content:"hello";color:red;display: block;}
CSS选择器的优先级：
CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序
css的继承：
继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。
然而CSS继承性的权重是非常低，只需要给加个颜色值就能覆盖掉它继承的样式颜色
CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background
body {color:red;} <p> helloyuan </p>
css的优先级：
0 有!important声明的规则高于一切。
1 内联样式表的权值最高 style=""－－－－－－－－－－－－1000；
2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－－100
3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10
4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－1
优先级相同 会按照加载的顺序 覆盖
CSS操作属性：
1 文本颜色：color：
十六进制值 - 如: ＃FF0000
RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
2 水平对齐方式：text-align：
left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
3 文本其它属性：
font-size: 10px; 字体大小 line-height: 200px; 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比 vertical-align:－4px 设置元素 内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效 text-decoration:none text-decoration 属性用来设置或删除文本的装饰。主要是用来 删除链接的下划线 font-family: 'Lucida Bright' 字体形式 宋体 font-weight: lighter/bold/border/ 字体粗细 font-style: oblique 字体样式 斜体 text-indent: 150px; 首行缩进150px letter-spacing: 10px; 字母间距 word-spacing: 20px; 单词间距 text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写
4 背景属性：
background-color: cornflowerblue background-image: url('1.jpg'); background-repeat: no-repeat;(repeat:平铺满) background-position: right top（20px 20px）;5 边框属性：
border-style: solid; 实体
border-color: chartreuse; 边框颜色 border-width: 20px 边框的宽度 简写：border: 30px rebeccapurple solid6 列表属性：
list-style-type 设置列表项标志的类型。
list-style-image 将图象设置为列表项标志。 list-style-position 设置列表中列表项标志的位置。 list-style 简写属性。用于把所有用于列表的属性设置于一个声明中 ul {list-style-image: url('');}7 display 属性：
none(隐藏某标签)
p{display:none;}
注意与visibility:hidden的区别：
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布 局中消失。
block(内联标签设置为块级标签)
span {display:block;}
注意：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。
inline(块级标签设置为内联标签)
li {display:inline;}
inline-block
display:inline-block可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决：
#outer{
border: 3px dashed; word-spacing: -5px; }8.margin 外边距 -- padding 内边距：
- margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
- padding: 用于控制内容与边框之间的距离；
- Border(边框): 围绕在内边距和内容外的边框。
- Content(内容): 盒子的内容，显示文本和图像。
（1）（margine(外边距)）
margin-top:100px;
margin-bottom:100px;
margin-right:50px; margin-left:50px;margin:10px 20px 20px 10px；
上边距为10px
右边距为20px
下边距为20px
左边距为10px
margin:10px 20px 10px;
上边距为10px
左右边距为20px
下边距为10px
margin:10px 20px;
上下边距为10px
左右边距为20px
margin:25px;
所有的4个边距都是25px
居中应用 margin: 0 auto;
（2）（padding(内边距)）
单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。
设置同margine；
注意： 1 body的外边距--- body{ margin:0;}
2 margin collapse（边界塌陷或者说边界重叠）-- overflow: hidden; 超出的部分要裁切隐藏
9.float属性：
(float:left,right)
10.position属性：
static
static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
position: relative／absolute
relative: 相对定位。
absolute: 绝对定位。
position:fixed
被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
文档流：
所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
父级坍塌现象:
1、固定高度
2、清除浮动(推荐)。
3、overflow:hidden
块级元素 vs 内联元素：
block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。
block元素可以设置width、height、margin、padding属性；
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width、height属性无效
常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等
注意： 块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，
它只能包含其它内联元素。p标签不能包含块级标签
# 1 vertical-align : 图片 会和 文本的基线对齐 (实际需要对齐文本的底线) # img {vertical-align:bottom;} --- 图片和文本的 调整 # 2 伪类标签： :hover : <span class='s1'> 区域一<\span> # .s1{ color:blue;padding:10px } 给span 加框 # .s1:hover{ color:red} # 悬浮变色 # 3 背景图片：background-img:url("") # 4 边框属性 ； border-right; border-radius 只有右边框 # 5 列表属性：平级关系--- list-style:none -- 去掉 序号 # 6 display 属性： none 隐藏 # 隐藏 div整个标签 都会隐藏 block inline inline-block 块级标签的特点 可设长宽 不可以在一行显示 内联标签的特点 可以在一行显示 不可以设置长宽 ===================================名字控制样式============================ # 7 margin 属性 外边框 ========================== float-- clear -- 只能修饰自己 ====================== # 8 float 属性 对于 div 可以在一行显示 对于 span 可以设置长和宽 # 9 clear 清除浮动 # clear：left 左边 不有浮动元素 -- 另起一行 # clear：none # clear：right # clear：both 切换 --- 切换到 浮动元素下面 只生成一个边框 # 10 父级塌陷 子元素 浮起来 父级元素 被挤到上边； # 1 .clearfix:after{ content:""; display:block; clear:both; } <div class='s1' clearfix> <\div> # 2 overflow:hidden # 11 positon position:relative 空间位置依然存在，并未脱离文档流， 参照物是之前的位置 top:200px; left:200px; position:absolute 空间位置完全脱离文档流 ， 参照物是 第一个已定位的父级标签。(配合父级relative使用) top:200px; left:200px; position: fixed 固定定位 不随着滚动条的移动而移动； 参照物是 可视窗口 后台 管理布局 左侧不动 --- position fixed 右侧不动 --- position fixed 内容滚动 --- overflow: scroll
读书使人心眼明亮
浙公网安备 33010602011771号