CSS

如何学习

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

什么是CSS

Cascading Style Sheet 层叠级联样式表
CSS：表现（美化网页）
字体，颜色，边框，高度，宽度，背景图片，网页定位，网页浮动…

发展史

CSS1.0
CSS2.0 div（块）+ css，HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1 浮动，定位
CSS3.0 圆角，动画… 浏览器兼容性…

快速入门

style

基本入门

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

建议使用这种规范

CSS的优势

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

CSS 的三种导入格式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--内部样式--><style>h1{color: green;}</style><!--外部样式--><link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级：就近原则 谁离这行代码更近，就显示谁的颜色-->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red">我是标题</h1>
</body>
</html>

拓展：外部样式两种写法

链接式：

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

导入式：

@import 是CSS2.1特有的（现在很少用）

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

选择器

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

基本选择器

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*标签选择器，会选择到页面上的这个标签的元素*/h1{color: red;background: #3cbda6;border-radius: 24px;}p{font-size: 80px;}</style>
</head>
<body>
<h1>学Java</h1>
<h1>学Java</h1>
<p>听狂神说</p>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*类选择器的格式 .class的名称{}好处：可以多个标签归类，是同一个class（名称取一样就行）可以复用*/.这个值可以为任何东西{color: #252626;}.随便取的{color: #ea0606;}</style>
</head>
<body>
<h1 class="这个值可以为任何东西">标题1</h1>
<h1 class="随便取的">标题2</h1>
<h1 class="随便取的">标题3</h1>
<p class="这个值可以为任何东西">P标签</p>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*id选择器 : id必须保证全局唯一！#id名称{}不遵循就近原则，优先级是固定的id选择器 > 类选择器 > 标签选择器*/#随便取的{color: #ea0606;}.style1{color: #3cbda6;}h1{color: green;}</style>
</head>
<body><h1 id="随便取的">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1></body>
</html>

优先级：id > class > 标签

层次选择器

后代选择器：在某个元素的后面祖爷爷爷爷爸爸你
- ```
/*后代选择器*/body p{background: red;}
```

子选择器：一代，儿子

/*子选择器*/body>p{background: #3cbda6;}

相邻兄弟选择器：同辈

/*相邻兄弟选择器：只有一个，相邻向下*/.active + p{background: green;}

通用选择器

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

结构伪类选择器

伪类：加了些条件

<style>/*选中ul的第一个子元素*/ul li:first-child{background: #ea0606;}/*选中ul的最后一个子元素*/ul li:last-child{background: green;}/*选中 p1 : 定位到父元素 ，选择当前的第一个元素选择当前p元素的父级元素，选中父级元素的第一个元素，并且是当前元素才生效（按顺序选择第一个）*/p:nth-child(1){background: aqua;}/*选中父元素下的p元素的第二个元素，选同类型的第二个*/p:nth-of-type(2){background: bisque;}

属性选择器(常用)

将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: blue;text-align: center;color: gainsboro;text-decoration: none;margin-right: 5px;font: bold 20px/50px Arial;}/*第一种[]里面只写属性的名，就会选中所有存在这个属性的元素*//*第二种[]里面可以写属性名 = 属性值（正则）就会选中存在这个属性值的元素= 绝对等于*= 包含这个元素^= 以这个开头$= 以这个结尾*//*选中存在id属性的元素   a[]{}*//*a[id]{*//*  background: yellow;*//*}*//*选中id=first的元素*//*a[id=first]{*//*    background: #31c239;*//*}*//*class中含有links的元素*//*a[class*="links"]{*//*  background: yellow;*//*}*//*  选中href中以http开头的元素*//*  a[href^=http]{*//*      background: yellow;*//*  }*/a[href$=doc]{background: yellow;}</style>
</head>
<body>
<p class="demo"><a href="http://www.baidu.com" class="links item first" id="first">1</a><a href="http://www.baidu.com" class="links item active" target="_blank" title="test">2</a><a href="images/123.html" class="links item ">3</a><a href="images/123.png" class="links item">4</a><a href="images/123.jpg" class="links item">5</a><a href="abc">6</a><a href="/a.pdf">7</a><a href="/abc.pdf">8</a><a href="abc.doc">9</a><a href="abc.doc" class="links item last">10</a>
</p>
</body>
</html>

美化网页元素

为什么要美化网页

有效的传递页面信息
美化网页，页面漂亮，才能吸引用户
凸显页面的主题
提高用户的体验

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

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

字体样式

<!--
font-family：字体
font-size:   字体大小
font-weight: 字体粗细
color:       字体颜色
--><style>body{font-family:"Arial Black",楷体;color: #ea0606;}h1{font-size: 50px;}.p1{font-weight: bold;}</style>

文本样式

颜色：color rgb rgba
文本对齐的方式 text-align = center(居中)
首行缩进 text-indent: 2em（首行缩进两个字符）
行高 line-height:（行高，和块的高度一致，就可以让单行文字上下居中）
装饰 text-decoration:
文本图片水平对齐：vertical-align:middle （文本和图片作为互相的参照物）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!--
颜色：单词RGB 0~FRGBA  A：0~1text-align: 排版，居中：center
text-indent: 段落，首行缩进：2em
height: 300px;
line-height: 300px;行高，和块的高度一致，就可以上下居中
--><style>h1{color: rgba(0,255,255,0.9);text-align: center;}.p1{text-indent: 2em;}.p3{background: blue;height: 300px;line-height: 300px;}/*下划线*/.p01{text-decoration: underline;}/*中划线*/.p02{text-decoration: line-through;}/*上划线*/.p03{text-decoration: overline;}/*a标签默认有下滑线，去掉*/a{text-decoration: none;}/*<!--*//*水平对齐~ 要有参照物*//*-->*/img,span{vertical-align:middle;}</style>
</head>
<body>
<a href="">123</a><p class="p01">123123</p>
<p class="p02">123123</p>
<p class="p03">123123</p>
<h1>故事介绍</h1>
<p class="p1">平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p>在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>
<p class="p3">Whenever you need me, I’ll be here.Whenever you’re in trouble, I’m always near.Whenever you feel alone, and you think everyone has given up…Reach out for me, and I will give you my everlasting love.
</p>
<img src="data:images/2021-07-27_161957.jpg" alt="">
<span>safdfdsa</span>
</body>
</html>

阴影(一般用不到)

/*text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/#price{text-shadow: #06eaea 10px 10px 1px;}

超链接伪类

正常情况下用这些就行，a ， a:hover

/*默认的颜色*/a{text-decoration: none;color: black;}/*鼠标悬浮的状态(重点用这个)*/a:hover{color: orange;font-size: 20px;}

列表

/*ul li*/
/*
list-style:none 去掉圆点circle 空心圆decimal 数字suare 正方形
*/
ul{background: #b6b3b3;
}
ul li{height: 30px;list-style: none;text-indent: 1em;
}

背景

背景颜色
背景图片

<style>div{width: 1000px;height: 700px;border: 1px solid red;/*图片默认全部平铺的*/background-image: url("images/1.jpg");}.div1{/*水平平铺*/background-repeat: repeat-x;}.div2{/*垂直平铺*/background-repeat: repeat-y;}.div3{/*不平铺*/background-repeat: no-repeat;}</style>

渐变

可以通过别人的网站来实现

background-color: #4158D0;
background-image: linear-gradient(302deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

盒子模型

什么是盒子模型

margin：外边距

padding：内边距

border：边框

边框

边框的粗细
边框的样式
边框的颜色

border(边框): 粗细 , 样式,颜色

<style>/*body总有一个默认的外边距是margin 0 ,初始化时常见的操作*//*h1,ul,li,body{*//*  margin: 0;*//*  padding: 0;*//*  text-decoration: none;*//*}*/#box{/*border: 粗细 , 样式,颜色*/width: 300px;border: 1px solid red;}h2{font-size: 16px;background-color: #3cbda6;line-height: 30px;margin: 0;}form{background: #3cbda6;}div:nth-of-type(1) input{border: 3px solid black;}div:nth-of-type(2) input{border: 3px dashed orange;}div:nth-of-type(3) input{border: 3px dashed #0040ff;}</style>

内外边距

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!--外边距的妙用 :居中元素margin: 0 :上下左右都为0margin: 0 1px:上下为0,左右为1margin: 0 auto;上下为0,左右居中
--><style>#box{/*border: 粗细 , 样式,颜色*/width: 300px;border: 1px solid red;margin: 0 auto;}h2{font-size: 16px;background-color: #3cbda6;line-height: 30px;}form{background: #3cbda6;}input{border: 1px solid black;}div:nth-of-type(1){padding: 10px ;}</style>
</head>
<body>
<div id="box"><h2>会员登录</h2><form action="#"><div><span>姓名:</span><input type="text"></div><div><span>密码:</span><input type="text"></div><div><span>邮箱:</span><input type="text"></div></form>
</div>
</body>
</html>

2021-07-27相关推荐

2021.05.27 发表自己第一篇技术文章
从昨晚开始做家庭财经系统.不要以为有系统两个字就怎么复杂,都是大家都会的.建库.建表. 第一个使用软件是mysql 2021.05.26 数据库 lianxi 已建好. 表 members_basic ...
[2021.1.27多校省选模拟10]跑步（线段树合并）
[2021.1.27多校省选模拟10]跑步经典的树上启发式合并题目,维护对应子树的从当前点到子树内一个节点这个链待定,其他部分已经确定的方案数,这个东西按照对应点到根节点的路径点权和为下标存在一个权 ...
[2021.1.27多校省选模拟10]染色（min-max容斥/二项式反演)
[2021.1.27多校省选模拟10]染色突然发现我对概率期望的理解不是很好... 部分分1:可以直接进行状压dp,然后按照题意模拟即可. 部分分2:首先可以发现这个问题是min_max容斥形式,然 ...
2021.09.27 MySQL笔记
2021.09.27 MySQL笔记文章目录 2021.09.27 MySQL笔记一.展示当前存在的所有数据库二.使用(选中)一个数据库三.创建一个数据表四.查询并展示该数据库内的所有数据表 ...
哔哩哔哩“2021.07.13 我们是这样崩的”报告的学习-1
哔哩哔哩"2021.07.13 我们是这样崩的"报告的学习-1 这份报告是我学计算机两年来第一次真实看到大厂的员工到底在干什么.出现了很多专有名词,以及当前最先进的互联网企业的应用 ...
2021.07.22禾赛提前批一面面经
2021.07.22禾赛提前批一面面经 1.LUTRAM的意思 2.LUTRAM和block RAM的区别 3.时序约束和时序优化 4.跨时钟域 5.为什么不能多bit采用同步寄存器打两拍(就这个问题 ...
OpenCV ERROE **： 02:07:27.741：GTK+ 2.x symbols detected. Using GTK+ 2.x and GTK+ 3 in the ...
OpenCV ERROE **: 02:07:27.741:GTK+ 2.x symbols detected. Using GTK+ 2.x and GTK+ 3 in the same proce ...
2021.07.07 宇信科技
2021.07.07 宇信科技宇信科技晚上电话面问了一堆java基础,离谱,jd上也没要求java:简历筛选扣工资! java小白,凭借c语言基础简单回答了一哈,面试官估计在电 ...
python爬虫爬美女图片：“小甲鱼056节轮一只爬虫的自我修养4：OOXX” 最终更新2021.6.27日，更新后可用！！！
目录 2020.10.25日更新代码: 2020.11.10日更新代码 2021.6.27日更新,更新后可用 2020.10.25日更新需要改动有两个方面: 第一方面,网址编码有变化,如http ...
2021/11/27大数据1+XJava答案
2021/11/27 步骤二 //已经提供Student类的属性,补充完成该类的有参(五个参数)及无参构造方法public Student(){}public Student(String name, ...

2021-07-27

CSS

什么是CSS

发展史

快速入门

CSS 的三种导入格式

选择器

基本选择器

层次选择器

结构伪类选择器

属性选择器(常用)

美化网页元素

为什么要美化网页

字体样式

文本样式

阴影(一般用不到)

超链接伪类

列表

背景

渐变

盒子模型

什么是盒子模型

边框

内外边距

2021-07-27相关推荐

最新文章

热门文章

2021-07-27

CSS

什么是CSS

发展史

快速入门

CSS 的三种导入格式

选择器

基本选择器

层次选择器

结构 伪类选择器

属性选择器(常用)

美化网页元素

为什么要美化网页

字体样式

文本样式

阴影(一般用不到)

超链接伪类

列表

背景

渐变

盒子模型

什么是盒子模型

边框

内外边距

2021-07-27相关推荐

最新文章

热门文章

结构伪类选择器