1、什么是CSS
-
CSS是什么
-
CSS怎么用
-
CSS选择器
-
美化网页
-
盒子模型
-
浮动
-
定位
-
网页动画
1.1、什么是CSS
层叠样式表
1.2、发展史
CSS1.0
CSS2.0 Div(块) CSS HTML与CSS结构分离的思想,网页变得简单,SEO
CSS2.1 浮动定位
CSS3.0 圆角,阴影,动画...浏览器兼容性~
1.3、CSS快速入门
style标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<style标签中可以编写css的代码>每一个声明最好使用分号结尾
语法:
选择器{
声明1;
声明2;
声明3;
...
}
-->
<style>
h1{
color: cadetblue;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
用link链接
-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
h1{
color: cadetblue;
}
CSS的优势
1.内容和表现分离
2、可以复用
3.样式较丰富
4、建议使用独立于html的css文件
5、利用SEO,容易被搜索引擎收录
Vue不容易收录
1.4、CSS的3种导入方式
行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 内部样式表-->
<style>
h1{
color: cadetblue;
}
</style>
<!-- 外部样式表-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--行内样式-->
<h1 style="color: cadetblue">我是标题</h1>
</body>
</html>
优先级
覆盖原则,最近的覆盖最远的
拓展:外部样式两种写法
-
连接式
-
导入式
CSS@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@import "style.css";
</style>
</head>
<body>
<h1>你好</h1>
</body>
</html>弊端:网页比较大时,先展示结构再渲染
link不同
区别:@import是CSS2.1特有的
2、选择器
作用:选择页面上的某一个元素或某一类元素
2.1、基本选择器
-
类选择器
.选择class名{ 声明1; 声明2; 声明3; ... }
可以多个标签归类,多个标签可以有同一个class名,并且可以使用在不同类的标签
-
标签选择器
标签选择器会选择全部的该标签
选择标签名{ 声明1; 声明2; 声明3; ... }
-
id选择器
#选择id名{ 声明1; 声明2; 声明3; ... }
只可以使用在一个标签上,必须全局唯一
js尽量操作id,class尽量操作css!
id的优先级高于class的,大于标签级。
2.2、层次选择器
1、后代选择器:在某个元素的后面,后代都出现结果,可以有多个
body p{
background: cadetblue;
}
2、子选择器:只有一代出现结果,可以有多个
body > p{
background: cadetblue;
}
3、相邻兄弟选择器:同代相邻并且下一个出现结果,只有一个或零个
.active + p{
background: cadetblue;
}
4、通用兄弟选择器:同代并且下面所用出现结果,可以有多个
.active~p{
background: cadetblue;
}
层次选择器不改变自身样式
2.3、结构伪类选择器
ul li:first-child{
background: cadetblue;
}
ul li:last-child{
background: cadetblue;
}
避免使用id和class选择器
p:nth-child(1){
background: cadetblue;
}
/*选择当前元素的父级元素的第n个元素,且第n个元素是该元素*/
p:nth-child(n){
background: cadetblue;
}
/*选择当前元素的父级元素的第n个元素*/
p:nth-of-type(n){
background: cadetblue;
}
/*鼠标移到上面出现的结果*/
a:hover{
background: cadetblue;
}
2.4、属性选择器(常用)
<!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: cadetblue;
text-align: center;
color: gray;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/*存在id的元素
a[属性名 = 属性值(可用正则表达式)]{}
*/
a[id=first]:hover{
background: yellow;
}
/* a[class*="links"]{
background: yellow;
}*/
/*href以http开头的变为黄色*/
/* a[href^=http]{
background: yellow;
}*/
a[href$=pdf]{
background: yellow;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://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="images/123.html" class="links item">3</a>
<a href="images/123png" class="links item">4</a>
<a href="images/123.jpg" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="/abc.pdf" class="links item">7</a>
<a href="/a.pdf" class="links item">8</a>
<a href="abc.doc" class="links item">9</a>
<a href="abcd.doc" class="class="links item last">10</a>
</p>
</body>
</html>
3.美化网页元素
3.1、为什么要美化网页
1、有效传递信息
2、美化网页,吸引用户
3、凸显主题
4、提高用户体验
span标签用于凸显想要凸显的字
3.2、字体样式
CSS 字体 - CSS:层叠样式表 | MDN (mozilla.org)
3.3、文本样式
基本文本和字体样式 - 学习 Web 开发 | MDN (mozilla.org)
3.4、超链接伪类
(67条消息) CSS——超链接的伪类超链接伪类花里梦雨的博客-CSDN博客
3.5、阴影
box-shadow - CSS:层叠样式表 | MDN (mozilla.org)
3.6、列表
#nav{
width: 300px;
background: gray;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background: red;
}
/*ul{
background: gray;
}*/
ul li{
height: 30px;
list-style: none;/*去掉前面的样式,比如圆点*/
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素学习</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li>
<a href="#">图书</a>
<a href="#">音像</a>
<a href="#">数字商品</a>
</li>
<li>
<a href="#">家用电器</a>
<a href="#">手机</a>
<a href="#">数码</a>
</li>
<li>
<a href="#">电脑</a>
<a href="#">办公</a>
</li>
<li>
<a href="#">家居</a>
<a href="#">家装</a>
<a href="#">厨具</a>
</li>
<li>
<a href="#">服饰鞋帽</a>
<a href="#">个性化妆</a>
</li>
<li>
<a href="#">礼品箱包</a>
<a href="#">钟表</a>
<a href="#">珠宝</a>
</li>
<li>
<a href="#">食品饮料</a>
<a href="#">保健食品</a>
</li>
<li>
<a href="#">彩票</a>
<a href="#">旅行</a>
<a href="#">充值</a>
<a href="#">票务</a>
</li>
</ul>
</div>
</body>
</html>
3.7、背景
background - CSS:层叠样式表 | MDN (mozilla.org)
3.8、渐变
使用 CSS 渐变 - CSS:层叠样式表 | MDN (mozilla.org)
4、盒子模型
4.1、什么是盒子模型
盒模型 - 学习 Web 开发 | MDN (mozilla.org)
4.2、边框
border - CSS:层叠样式表 | MDN (mozilla.org)
4.3、内外边距
margin - CSS:层叠样式表 | MDN (mozilla.org)
4.4、圆角边框
4.5、盒子阴影
(67条消息) CSS —— 盒子阴影(box-shadow)_ZhaoYLi的博客-CSDN博客
5、浮动
5.1、标准文档流
块级元素:独占一行
h1~h6 p div 列表
行内元素
span a img strong
行内元素可以被包含在块级元素中,反之则不行
5.2、float
float - CSS:层叠样式表 | MDN (mozilla.org)
5.3、display
display的值:
-
block块元素
-
inline行内元素
-
inline-block 是块元素,但是可以内连,在一行
-
none消失
5.4、overflow及父级边框塌陷问题
(67条消息) overflow及父级边框塌陷问题4种解决方案使用overfolw塌陷kalimera的博客-CSDN博客
增加父级元素的高度,最简单最low的方法,不推荐
/* 最外层容器设置边框
增加父级元素高度 */
#father{
border: black solid 1px;
height: 600px;
}
father下增加空div,简单,但代码中需尽量避免空div <body>
<div id="father">
<div class="layer01"><img src="img/1.jpg" alt=""></div>
<div class="layer02"><img src="img/2.jpg" alt=""></div>
<div class="layer03"><img src="img/3.jpg" alt=""></div>
<div class="layer04">浮动的盒子可以向左右浮动,直到其外边缘碰到包含框or另一个浮动盒子时</div>
<div class="clear"></div>
</div>
</body>
.clear{
clear: both;
margin: 0;
padding: 0;
}
在父级元素中增加overflow:hidden,此时父级元素并没有赋高度,其高度是由内部元素撑起来的,所以其内容并不会真的被修剪隐藏(overflow:auto会出现滚动条,类似overflow:scroll),但一些下拉场景中避免使用
/* 最外层容器设置边框 */
#father{
border: black solid 1px;
overflow: hidden;
/* height: 600px; */
}
推荐方案:在父类添加一个伪类:after,效果相当于在代码中新增空div,但是写在css中,没有副作用
/*
推荐方案:在父类添加一个伪类:after,效果相当于在代码中新增空div,但是写在css中,没有副作用
/* 伪类 */
#father::after{
content: '';
display: block;
clear: both;
}
6、定位
6.1、相对定位和绝对定位
CSS position 相对定位和绝对定位 | 菜鸟教程 (runoob.com)
6.2、固定定位
(67条消息) CSS学习21:fixed(固定定位)玉安ZhangDe的博客-CSDN博客
6.3、z-index
z-index - CSS:层叠样式表 | MDN (mozilla.org)
7、动画
使用 CSS 动画 - CSS:层叠样式表 | MDN (mozilla.org)
标签:cadetblue,元素,样式表,background,随笔,选择器,CSS From: https://www.cnblogs.com/qylqf/p/17627313.html