CSS基础入门
本博客为视频学习笔记
原视频作者：狂神
原视频地址：https://www.bilibili.com/video/BV1YJ411a7dy?p=2
1 了解CSS
1.1 如何学习css
- css是什么
- css怎么用（快速入门）
- css选择器，重难点
- 美化网页（文字，阴影，超链接，列表，渐变…）
- 盒子模型
- 浮动
- 定位
- 网页动画（特效效果）
1.2 什么是CSS
- Cascading Style Sheet 层叠级联样式表
- CSS：表现层，美化网页，字体，颜色，边距，高度，宽度，背景图片，网页浮动。。。
- CSS是Cascading Style Sheet的缩写，是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（Cascading Stylesheet）。
CSS主要用来设计网页的样式，美化网页；它不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
它的作用可以达到：
- 在几乎所有的浏览器上都可以使用。
- 以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。
- 使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。
- 可以轻松地控制页面的布局 。
- 可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。
1.3 CSS发展史
CSS1.0
CSS2.0 DIV（块）+CSS，html与css结构分离的思想，网页变得简单
CSS2.1 浮动，定位
CSS3.0 圆角边框，阴影，动画。。。浏览器兼容性
1.4 CSS优势
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式十分丰富
- 建议使用独立于html的css文件
- 容易被搜索引擎收录
2 CSS的导入方式
遵循就近原则
- 内部样式
<style> h1{ color: red; } </style> - 外部样式
- 链接式
<link rel="stylesheet" href="css/style.css">- 导入式
@import 是CSS2.1 特有的
<style> @import url("css/style.css"); </style> - 行内样式
<h1 style="color: red">我是标题</h1>
3 选择器
作用：选择页面上的某一个或者某一类元素
3.1 基本选择器
- 标签选择器：选择同类型的标签 标签{}
<style>
/*标签选择器,会选择页面上所有的这个标签的元素*/
h1{
color: red;
background: antiquewhite;
border-radius: 24px;
}
p{
font-size: 80px;
}
</style>
- 类选择器：选择所以class一致的标签，跨标签
<style>
/*类选择器的格式 .class的名称{}
好处:可以多个标签归类,是同一个class
*/
.hhb{
color: blue;
}
.kb{
color: red;
}
</style>
- id 选择器：全局唯一
<style>
/*ID选择器格式 :id必须保证全局唯一
#id名称{}
*/
#hhb{
color: chartreuse;
}
.kb{
color: aqua;
}
</style>
不遵循就近原则
优先级：id选择器>class选择器>标签选择器
3.2 层次选择器
- 后代选择器
某个标签下的所有子标签以及子标签的子标签，有递归效果
/*后代选择器*/
body p{
background: red;
}
- 子选择器
仅有该标签下的一代子标签，无递归效果
/*子选择器*/
body>p{
background: aqua;
}
- 相邻兄弟选择器 同辈
/*相邻兄弟选择器 ,只有一个,相邻(向下)*/
.active + p{
background: blueviolet;
}
- 通用选择器
/*通用兄弟选择器 ,当前元素的向下所有兄弟元素*/
.active~p{
background: blueviolet;
}
3.3 结构 伪类选择器
伪类：条件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*ul的第一个子元素*/
ul li:first-child{
background: chartreuse;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: cornflowerblue;
}
/*选中p1 p:nth-child(2)
定位到当前p元素的父元素,选择父元素下的第二个元素,并且是当前元素类型(p)才有效
*/
p:nth-child(2){
color: chartreuse;
}
/* p:nth-of-type(2)
定位父元素,选择父元素下的第二个当前元素类型 (p标签)
*/
p:nth-of-type(2){
background: red;
}
</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>
网页效果图
3.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: cornflowerblue;
text-align: center;
color: beige;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/* 存在id属性的元素 */
a[id]{
background: red;
}
/* id为one 的属性
[属性名=属性值] 可以用正则表达式
*/
a[id=one]{
background: chartreuse;
}
/* class中有 links的元素
[属性名=属性值] 可以用正则表达式
= 绝对等于
*= 通配
^= 以这个开头
$= 以这个结尾
*/
a[class*="links"]{
background: black;
}
/* 选择 href 以 https 开头的元素
正则表达式
*/
a[href^=https]{
background: yellow;
}
/* href以pdf结尾的 */
a[href$=pdf]{
background: deeppink;
}
</style>
</head>
<body>
<p class="demo">
<a href="" id="one">0</a>
<a href="https://www.baidu.com" id="">0</a>
<a href="http://www.baidu.com" class=" 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/123.png" 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="/a.pdf" class=" item">7</a>
<a href="/abc.pdf" class=" item">8</a>
<a href="abc.doc" class="links item">9</a>
<a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>
网页效果
4 美化网页元素
4.1 为什么要美化网页
- 有效地传递页面信息
- 美化网页，吸引用户
- 凸显页面的主题
- 提高用户的体验
span标签
span标签：重点要突出的字，使用span套起来。使用什么名字标签都行，约定使用span标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#java{
font-size: 50px;
}
</style>
</head>
<body>
<p>
欢迎学习<span id="java">java</span>
</p>
</body>
</html>
网页效果
4.2 字体样式
<!--
font-family：字体
font-size：字体大小
font-weight:字体粗细
color: 字体颜色
-->
<style>
body{
font-family: Arial,楷体;
color: chocolate;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bold;
}
</style>
4.3 文本样式
- 颜色：color，RGB,RGBA
- 对齐方式：text-align = “center” 水平居中
- 首行缩进：text-indent：2em
- 行高：line-height，单行文字上下居中 ，line-height=height
- 装饰：text-decoration：underline，line-through，overline
- 文本图片水平对齐：vertical-align：middle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
颜色：
单词
RGB :
R:red
G:green
B:blue
RGBA
A：透明度
text-align:排版
text-indent: 2em; 首行缩进两个字
行高line-height和 块的高度 height 一致就可以上下居中\
line-height: 30px;
height: 30px;
-->
<style>
h1{
color: rgba(0,255,255,1);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3{
background: aqua;
line-height: 30px;
height: 30px;
}
/*
下划线
中划线
上划线
*/
.one{
text-decoration: underline;
}
.two{
text-decoration: line-through;
}
.three{
text-decoration: overline;
}
</style>
</head>
<body>
<p class="one">123123</p>
<p class="two">123123</p>
<p class="three">123123</p>
<h1>故事介绍</h1>
<p class="p1">平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，
魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性 打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。
很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。</p>
<p>
在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>
<p class="p3">
I just wish someday and somehow，We can be back together， Together we'll stay，Always and forever。
</p>
</body>
</html>
网页效果
4.4 阴影
/*text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{
text-shadow:#33cccc 3px 3px 2px ;
}
4.5 超链接伪类
正常情况下，a，a：hover
/*默认的颜色*/
a{
text-decoration: none;
color: #000000;
}
/*鼠标悬浮的状态*/
a:hover{
color: chocolate;
font-size: 30px;
}
4.6 列表
html：
<!DOCTYPE html>
<html lang="en">
<head lang="en">
<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>
css:
#nav{
width: 300px;
background: grey;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 30px;
background: red;
}
ul{
background: grey;
}
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;
}
网页效果：
5、 盒子模型
5.1 什么是盒子模型
margin：外边距
padding：内边距
border：边框
5.2 边框
- 边框的粗细
- 边框的样式
- 边框的颜色
css
html
效果
1819
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
