CSS详解
CSS
如何学习
-
CSS是什么
-
CSS怎么用（快速入门)
-
CSS选择器(重点＋难点)
-
美化网页 （文字，阴影，超链接，列表,渐变....)
-
盒子模型
-
浮动
-
定位
-
网页动画（特效效果)
什么是CSS
Cascading Style Sheet 层叠样式表
CSS：表现层(美化网页)
字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动...
发展史
CSS1.0
CSS2.0 DIV(块)+ CSS，HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画.....浏览器兼容性~
css优势
- 内容与表现分离
- 网页结构表现统一，可以实现复用
- 样式十分的丰富
- 建议使用独立于html的css文件
- 利用SEO(搜索引擎优化)，容易被搜索引擎收录
CSS的3种导入方式
优先级：就近原则
扩展：外部样式两种写法
-
链接式
<!-- 链接式 --> <link rel="stylesheet" href="css/style.css"> -
导入式
<!-- 导入式 --> <style> @import url("css/style.css") </style>
选择器
作用：选择页面上的某一个或者某一类元素
基本选择器
-
标签选择器：会选择到页面上所有的这个标签的元素
选择一类标签
-
类选择器：.class的名称{}
好处：可以多个标签归类，是同一个class
选择所有class属性一致的标签，跨标签。
-
id选择器：#id的名称{}
id必须保证全局唯一；不遵循就近原则，固定的
全局唯一
选择器的优先级：
id选择器 >class选择器> 标签选择器
层次选择器
-
后代选择器：在某个元素的后面
祖爷爷 爷爷 爸爸 你
<!--后代选择器--> body p{ background: red; } -
子选择器：一代，儿子
<!--子选择器--> body>p{ background: red; } -
相邻兄弟选择器：同辈
<!--相邻兄弟选择器，只有一个，相邻（向下）--> .active + p{ background:yellow; } -
通用选择器
<!-- 通用选择器 ，当前选中元素的向下的所有兄弟元素--> .active~p{ background:black; }
结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构伪类选择器学习</title>
<!-- ul的第一个元素-->
<!--ul的最后一个元素-->
<!-- 选中p1：定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效，顺序
-->
<!-- 选中父元素，下的p元素的第二个，类型-->
<style>
ul li:first-child{
background:red;
}
ul li:last-child{
background: blue;
}
p:nth-child(3){
background: yellow;
}
p:nth-of-type(1){
background: green;
}
</style>
</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
a:hover{
background:black;
}
属性选择器
格式：元素[]{}
[]中是属性名=属性值
=：绝对等于
*=：包含这个元素
^=：以...开头
$=：以...结尾
美化网页元素
为什么要美化网页
- 有效传递页面信息
- 美化网页，页面漂亮，吸引用户
- 凸显页面主题
- 提高用户体验
span标签：重点要突出的字，使用span套起来
字体样式
font-family：字体
font-size：字体大小
font-weight：字体粗细
color：字体颜色
连体格式：font:字体风格 字体粗细 字体大小 字体;
文本样式
- 颜色 color rgb rgba()
- 文本对齐的方式 text-align = center
- 首行缩进 text-indent:2em
- 行高 line-height:
- 单行文字上下居中：line-height=height
- 装饰 text-decoration
- 文本图片水平对齐 vertical-align:middle
阴影
/*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{
text-shadow:#3cc7f5 10px 10px 2px;
}
超链接伪类
正常情况下：a,a:hover
a{
text-decoration:none;
color:#000000;
}
a:hover{
color:orange;
font-size:50px;
}
a:active{
color:blue;
}
列表
ul li{
list-style:none;
}
背景
ul li{
background:red;
background-image:url();
background-repeat:no-repeat;
background-position:236px 2px;
}
渐变
background-color: #4158D0;
background-image: linear-gradient(45deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
盒子模型div
什么是盒子模型
margin：外边距
padding：内边距
border：边框
练习
/*初始化*/
h1,ul,li,a,body{
margin:0;
padding:0;
text-decoration:none;
}
border:粗细 样式 颜色
border:1px solid red;
border:1px dashed red;
内外边距
盒子的计算方式：你的元素到底多大？
margin+border+padding+内容宽度
圆角边框
border-radius：50px 20px 19px 17px;
如果要调整为圆圈需要：宽度=半径
<style>
div{
width:100px;
height:100px;
border:10px solid red;
border-radius:100px;
}
</style>
盒子阴影
margin:0 auto;
能居中的要求：块元素，因为块元素有固定的高度。
浮动
标准文档流：标准文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。当前面内容发生了变化，后面的内容位置也会随着发生变化。
HTML就是一种标准文档流文件。
块级元素：独占一行
h1-h6 p div 列表......
行内元素：不独占一行
span a img strong......
行内元素可以包含在块级元素中，反之不可以
display
display:inline-block
<!--块元素但是有行内特性-->
这个也是一种实现行内元素排列的方式，但是我们很多情况都是用float
float
left
right
clear
父级边框塌陷问题
解决方案：
-
增加父级元素
#father{ border:1px #000 solid; height:8000px; } -
增加一个空的div标签，清除浮动
<div class="clear"> </div> .clear{ clear:both; margin:0; padding:0; } -
overflow
在父级元素中增加一个 overflow:hidden; -
父类添加一个伪类：after
#father:after{ content:''; display:block; clear:both; }
小结
-
浮动元素后面增加空div
简单，代码中尽量避免空div
-
设置父元素的高度
简单，元素假设有了固定的高度，就会被限制
-
overflow
简单，下拉的一些场景避免使用
-
父类添加一个伪类: after(推荐使用)
对比
-
display
方向不可以控制
-
float
浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题
定位
相对定位
position:relative;
相对于原来的位置，进行指定的偏移，它任然在标准文档流中，原来的位置会被保留
top left rigth bottom
绝对定位
position:absolute;
定位:基于xxx定位，上下左右~
- 没有父级元素定位的前提下，相对于浏览器定位
- 假设父级元素存在定位，我们通常会相对于父级元素进行偏移~
- 在父级元素范围内移动
- 相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在在标准文档流中，原来的位置不会被保留
固定定位
position:fixed;
z-index
图层
z-index:默认是0，最高是999
网页背景透明度
opacity:0.5;
浙公网安备 33010602011771号