CSS简单入门(一)

CSS是什么
CSS怎么用
CSS选择器（重点+难点）
美化网页（文字，阴影，超链接、列表、渐变…）
盒子模型
浮动
定位
网页定位（特效效果）

1.CSS是什么

1.1 什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS：表现（美化网页）

字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…

1.2 发展史

CSS1.0

CSS2.0 DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单,SEO

CSS2.1 浮动、定位

CSS3.0 圆角、阴影、动画…浏览器兼容性

1.3 快速入门

stytle

基本入门

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--规范<stytle> 可以编写css代码。每一个声明，最好使用分号结尾语法：选择器{声明1;声明2;声明3;}--><style>h1{color:red;}</style>
</head>
<body>
<h1>CSS语法</h1>
</body>
</html>

建议使用这种规范

css的优势

内容和表现分离
网页结构表现统一，可以使用复用
样式十分的丰富
建议使用独立于html的css文件
利用SEO，容易被搜索引擎收录

1.4CSS的三种导入方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--内部样式--><style>h1{color:green;}</style><link rel="stylesheet" href="css/stytle.css"></head>
<body><!--优先级：就近原则--><!--行内样式:在标签元素中，编写一个stytle属性，编写样式即可-->
<h1 style="color:red" >CSS语法</h1>
<h1 >CSS语法</h1></body>
</html>

拓展：外部样式两种方式

链接式

html

<!--外部样式 链接式--><link rel="stylesheet" href="css/stytle.css">

导入式

@import 是CSS2.1特有的！

<!--外部样式 导入式--><style>@import url("css/stytle.css");</style>

2选择器

作用：选择页面上的某一个或者某一类元素

2.1基本选择器

标签选择器：选择一类标签格式：标签{}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<style>/*标签选择器，会选择到页面上所有的这个标签的元素*/h1{color: red;background: aqua;border-radius: 25px;}p{font-size:80px;}
</style><h1>hello</h1>
<h1>world</h1>
<p>你好！</p>
</body>
</html>

类选择器 class：选择所有class属性一致的标签，跨标签格式：.类名{}

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>Title</title><style>/*类选择器的格式，.class的名称{}*//*好处，可以多个标签归类，是同一个class，可以复用*/.t1{color: #9dc2e1;}.t2{color: #a53f52;}.t3{color: #77b888;}</style></head>
<body><h1 class="t1">标题1</h1>
<h1 class="t2">标题2</h1>
<h1 class="t3">标题3</h1><p class="t1">段落</p>
</body>
</html>

id选择器：全局唯一！格式：#id名{}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*id选择器：id必须保证全局唯一！#id名称{}不遵循就近原则，固定的id选择器>类选择器>标签选择器*/#t1{color: #ad3d32;}</style></head>
<body>
<!--注意不要纠结唯一性，以下使用多次是不符合规范的-->
<h1 id="t1">标题1</h1>
<h1 id="t1">标题2</h1>
<h2 id="t1">标题3</h2>
</body>
</html>

优先级：id>class>标签

2.2层次选择器

后代选择器：在某个元素的后面祖爷爷爷爷爸爸儿子
```
 /*后代选择器*/body p{background: #e26683;}
```

子选择器,一代，儿子

 /*子选择器*/body>p{background: aqua;}

相邻兄弟选择器同辈

  /*相邻兄弟选择器，同辈，只有一个，相邻（向下）*/.active +p{background: aquamarine;}

通用选择器

    /*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/.active~p{background: blueviolet;}

2.3 结构伪类选择器

伪类：条件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*ul的第一个元素*/ul li:first-child{background: #e2b4ae;}/*ul的最后一个元素*/ul li:last-child{background: #9dc2e1;}/*选中p1:定位到父元素，选择当前的第一个元素选择当前p元素的父级元素，选择父级元素的第一个，并且是当前元素才生效*/p:nth-child(2){background: #635a9b;}/*选中父元素下的p元素的第1个，类型*/p:nth-of-type(3){background: #b6f65f;}</style>
</head>
<body>
<h1>hello</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul><li>li1</li><li>li2</li><li>li3</li>
</ul>
</body>
</html>

2.3属性选择器

id+class

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>.demo a{float:left;display: block;height: 50px;width: 50px;border-radius: 10px;background: bisque;text-align: center;color: gainsboro;text-decoration: none;margin-right: 5px;font: bold 20px/50px Arial;}/*属性名，属性名=属性值（正则）=绝对等于*=包含^=开头匹配$=结尾匹配*//*存在id属性的元素  a[]{}    *//* a[id]{background: aqua;}*//*id=first*//*a[id=first]{background: blueviolet;}*//*class中有links的元素*//*a[class*="links"]{background: yellow;}*//*选中href中以http开头的元素*//* a[href^=http]{background: chartreuse;}*//*选择href中以png结尾的元素 */a[href$=png]{background: darkcyan;}
</style>
<body>
<p class="demo"><a href="https://www.baidu.com" class="links item first" id="first">1</a><a href="" class="links item active" target="_blank" title="test">2</a><a href="css/123.html" class="links item">3</a><a href="css/123.png"  class="links item">4</a><a href="abc">5</a>
</p>
</body>
</html>

=
*=
^=
$=

3美化网页元素

3.1为什么要美化网页

span 标签：重点突出的字，使用span套起来

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#happy{font-size: 66px;}</style>
</head>
<body>
欢迎<span id="happy">学习</span>
</body>
</html>

3.2字体样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--font-family:字体font-size：字体大小font-weight：字体粗细color：字体颜色--><style>body{font-family:楷体;color: #d98117;}h1{font-size: 50px;}.p1{font-weight: bolder;}.p2{color: red;font-weight: bolder;}</style>
</head>
<body><h1>少年中国说节选</h1>
<p class="p1">少年智则国智，少年富则国富；少年强则国强，少年独立则国独立；少年自由则国自由；少年进步则国进步</p>
<p>少年胜于欧洲，则国胜于欧洲；少年雄于地球，则国雄于地球</p>
<p>红日初升，其道大光。河出伏流，一泻汪洋。潜龙腾渊，鳞爪飞扬</p>
<p>乳虎啸谷，百兽震惶。鹰隼试翼，风尘翕张。奇花初胎，矞矞皇皇</p>
<p>干将发硎，有作其芒。天戴其苍，地履其黄。纵有千古，横有八荒。前途似海，来日方长</p>
<p class="p2">美哉我少年中国，与天不老！壮哉我中国少年，与国无疆！</p>
</body>
</html>

3.3文本样式

颜色 color rgb rgba
文本对齐方式 text-align
首行缩进text-indent
行高 line-height
装饰 text-decoration

文本图片水平对齐：vertical-align

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--颜色：单词RGB 0-FRGBA A：0-1透明度text-align：排版text-indent:段落首行缩进行高 line-height和 块的高度 height一致就可以上下居中--><style>h1{color:red;text-align: center;}.p1{text-indent: 2em;}.p2{background: #a5973d;height: 100px;line-height:100px;}/*下划线*/.p3{text-decoration: underline;}/*超链接去下划线*/a{text-decoration: none;}img,span{vertical-align: middle;}</style>
</head>
<body>
<p><img src="a.jpg"  width="50%"><span class="p2" >今日特选</span>
</p>
<h1>少年中国说节选</h1>
<p class="p1">少年智则国智，少年富则国富；少年强则国强，少年独立则国独立；少年自由则国自由；少年进步则国进步</p>
<p class="p2">少年胜于欧洲，则国胜于欧洲；少年雄于地球，则国雄于地球</p>
<p class="p3">红日初升，其道大光。河出伏流，一泻汪洋。潜龙腾渊，鳞爪飞扬</p>
<p>乳虎啸谷，百兽震惶。鹰隼试翼，风尘翕张。奇花初胎，矞矞皇皇</p>
<p>干将发硎，有作其芒。天戴其苍，地履其黄。纵有千古，横有八荒。前途似海，来日方长</p>
<p>美哉我少年中国，与天不老！壮哉我中国少年，与国无疆！</p>
<a href="">更多精彩部分</a>
</body>
</html>

3.4阴影

 /*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/#year{text-shadow:grey 10px 10px 8px;}

3.5超链接伪类

正常情况下a:hover

 /*默认的颜色*/a{text-decoration: none;color: black;}/*鼠标悬浮的颜色*/a:hover{color: orange;font-size:50px;}/*鼠标按住未释放的状态*/a:active{color: green;}

3.6列表

/*
list-stytle:
none: 去掉原点
circle：空心圆
decimal：数字
square：正方形
*/
ul{background: rgba(63, 143, 207, 0.13);
}
ul li{height: 30px;list-style: none;text-indent: 1em;
}

3.7背景

背景颜色

背景图片

 <style>div{width: 500px;height: 400px;border: 1px solid red;background-image: url("b.jpg");/*默认是全部平铺的*/}.div1{background-repeat: no-repeat;}.div2{background-repeat: repeat-x;}</style>

常见设置：

background-image: url("…/r.png") ;
background-repeat: no-repeat;
background-size: 10px 10px;
background-position:0,10px;

/颜色，图片，图片位置、平铺方式/
background: red url("…/d.png") 260px 10px no-repeat;

ul li{height: 30px;list-style: none;text-indent: 1em;background-image: url("../r.png") ;background-repeat: no-repeat;background-size: 10px 10px;background-position:0,10px;
}

3.8渐变

网站：https://www.grabient.com/

background-color: #8EC5FC;
background-image: linear-gradient(229deg, #8EC5FC 0%, #E0C3FC 100%);