1、如何学习？
-
css是什么
-
css怎么用（快捷入门）
-
css选择器（重点+难点）
-
美化网页（文字，阴影，超链接，列表，渐变...)
-
盒子模型
-
浮动
-
定位
-
网页动画（特效效果）
1.1、什么是css
Cascading Style Sheet 层叠级联样式表
css:表现层（美化网页）
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动.....
1.2、发展史
css1.0
css2.0: Div(块)+CSS，HTML与CSS结构分离的思想，网页变革简单，SEO
css2.1：浮动，定位
css3.o:圆角，阴影，动画....，流量器兼容性~
1.3、快速入门
-
CSS的优势：
-
内容和表现分离
-
网页结构表现统一，可以实现复用
-
样式十分的丰富
-
建议使用独立于html的css文件
-
利用SEO，容易被搜索引擎收录！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 外部样式-->
<link rel="stylesheet" href="css/style.css">
<!-- 内部样式-->
<style>
-
链接式：
<!-- 外部样式-->
<link rel="stylesheet" href="css/style.css">
-
导入式：
@import 是CSS2.1特有的！
首页link和import语法结构不同，前者<link>是html标签，只能放入html源代码中使用，后者可看作为css样式，作用是引入css样式功能。import在html使用时候需要<style type="text/css">标签，同时可以直接“@import url(CSS文件路径地址);”放如css文件或css代码里引入其它css文件。
本质上两者使用选择区别不大，但为了软件中编辑布局网页html代码，一般使用link较多，也推荐使用link。
2、选择器
作用：选择页面上的某一元素或某一类元素
2.1 基本选择器
-
标签选择器：选择一类标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
-
类选择器：class：选中所有class属性一致的标签，跨标签，类名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
-
id选择器：全局唯一！ # Id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
优先选择器：id >class > 标签
2.2、层次选择器
body:
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li><p>p4</p></li>
<li><p>p5</p></li>
<li><p>p6</p></li>
<!--</ul>-->
<!--<p class="active">p7</p>-->
<!--<p>p8</p>-->
</body>
流程图：*
-
后代选择器：在某个元素的后面 （ 祖爷爷 爷爷 爸爸 我）
body p{
background: red;
}
-
子选择器,一代，儿子
子选择器
body>p{
background: hotpink ;
}
-
相邻兄弟选择器
-
通用选择器
2.3、结构伪类选择器
伪类：条件
2.4、属性选择器 （重要）
id + class 相结合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: #aaaaff;
text-align: center;
color: #4f4d4e;
text-decoration: none;
margin-right: 5px;
font:bold 20px/50px Arial\;
}
| 
发表于 2021-7-25 16:23:00
