CSS的学习笔记
CSS
什么是CSS？
1.1.CSS是什么？
2.CSS怎么使用？
3.CSS选择器（重点+难点）
4.美化页面
5.盒子模型
6.浮动
7.定位
1.1、什么是CSS？
Cascading Style Sheet层叠级联样式表
CSS：表现层
1.2、CSS发展史
CSS1.0加了一些最基本的样式，加粗之类
CSS2.0 div(块元素) css提出来结构和表现分离的思想，使网页变的跟简单
CSS2.1浮动定位
CSS3.0圆角阴影动画…浏览器的兼容性~~有些浏览器是不支持动画。
1.3、快速入门
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
/*
规范：在style标签里面编写CSS代码，每一个声明都需要使用;
结尾语法：
选择器{
声明1;
声明2;
声明3;
}
*/
h1{color:aqua;}
style>
head>
<body>
<h1>helloworldh1>
body>
html>
注意：Style可以写在别的位置，但是最好写在head标签里面
建议使用这种规范
CSS
优势：
1.内容和表现分离正常情况下HTML代码很少CSS代码却很多。CSS代码很容易就成千上万行所有的代码都写在HTML里面，你的网页加载很慢
2.网页结构统一，可以实现复用
3.样式丰富
4.建议使用独立于HTML以外的CSS文件
1.4.CSS的三种独立导入方式
<1>内部，内联样式
内部样式（优点：可以复用代码）
<html>
<head>
<title>title>
<style>
h1{ width: 30;background-color: red;}
style>
head>
<body>
<h1>你好h1>
body>
html>
内联样式
<html>
<head>
<title>title>
head>
<body>
<h1 style="width: 30;background-color:red">你好h1>
body>
html>
<2>外部样式
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<link rel="stylesheet"type="text/css"href="css/style.css"/>
head>
<body>
<h1>hello worldh1>
body>
html>
/*外部样式*/
h1{
color:red;
}
拓展：外部样式的两种写法
- 链接式
html
<link rel="stylesheet"type="text/css"href="css/style.css"/>
rel：指定资源跟页面的关系
- 导入式CSS2.1
<style type="text/css">
@importurl("css/style.css");
style>
<3>行内样式（内联）
DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<h1 style="color:chocolate;">helloworldh1>
body>
html>
三种样式的优先级：
理论上：行内>内部>外部
真实情况:就近原则
CSS中的颜色表示法
- 单词表示法：red blue…
- 十六进制表示法：#000000黑色#ffffff白色…
- RGB三原色表示法（取值范围0~255）：rgb（0,0，0）黑色（255,255,255）白色
CSS背景样式
- background-color背景颜色
- background-image背景图片
url（图片地址）默认会水平垂直铺满背景块 - background-repeat背景图片的平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
repeat（x，y都平铺，默认）
norepeat不平铺
如果图片小于块容量图片默认放在左上角，大于块容量的话，只会在块中显 示部分图片 - background-position背景图片的位置
x，y： 100px，30px；
x:left，center，right
y:top，center，bottom
用百分比也可以 - background-attachment背景图片随滚动条的移动方式
scroll：图片随滚动条滚动（默认）（图片所在位置以块为标准）
fixed：图片不随滚动条滚动（此时图片所在位置是以网页为标准的）
CSS边框样式
border-style:边框的样式
solid实线
dashed虚线
dotted点线
border-width边框的大小
px…
border-color边框的颜色
注：针对每一条单独设置
<html>
<head>
<head>head>
<style>
div{ width: 300;height: 300;border-style: dashed;border-color: red;border-width: 30px;}
style>
head>
<body>
<div>div>
body>
html>
如果要只设置一条边在border-right-style:dashed;
透明颜色 transparent（与背景色相契合）
CSS文字样式
- font-family:字体类型
英文字体：Arial…(针对中文不起作用 )
中文字体:微软雅黑(默认)，楷体，宋体…（对中英文都起作用）
中文字体的英文名称：
微软雅黑：MicrosoftYaHei
宋体：SimSun
<html>
<head>
<title>title>
<style>
div{
font-family: Arial,宋体，微软雅黑;
}
style>
head>
<body>
<div>你好div>
body>
html>
注：
- 在设置字体时为了避免电脑中没有对应的字体，一般会设置多种字体按照从前到后的顺序进行选择，假如电脑中都没有相应字体则会以电脑默认字体输出。
- 引号的问题：字体中没有空格就不用加引号，有空格就必须加（‘Time New Roman’）
- 衬线体（宋体）和非衬线体（微软雅黑）
注：左侧为衬线体，右侧为非衬线体
3. 字体大小
font-size(默认大小为16px)
<html>
<head>
<title>title>
<style>
div{
font-size: 20px;
}
style>
head>
<body>
<div>你好div>
body>
html>
4. 字体粗细：font-weight
模式：正常和加粗两种
写法：单词（normal ，bold）数字（100~900）
注：100500都是正常大小，600900是加粗的，输入数字为100的整数倍
5. 字体样式：font-style
模式：正常（normal）和倾斜（italic）两种
写法：单词（normal ，italic）
注：oblique也表示倾斜，但用的比较少
区别：italic：带有倾斜属性字体才可以设置倾斜
oblique：没有倾斜属性字体也可以设置倾斜
段落样式
1. text-decoration:文本装饰
下划线：underline
上划线：overline
删除线：line-through
无任何装饰：none
注：可以添加多个文本修饰，空格隔开
<html>
<head>
<title>title>
<style>
p{
text-decoration: underline;
}
style>
head>
<body>
<p>你好p>
body>
html>
2. 文本大小写：text-transform(针对英文段落)
小写：lowercase
大写：uppercase
只对首字母大写：capitalize
<html>
<head>
<title>title>
<style>
p{
text-transform: lowercase;
}
style>
head>
<body>
<p>difnddfmdkHBBIHUHkgp>
body>
html>
3. 文本缩进：text-indent（首行缩进）
em单位，这是一个相对单位，1em永远跟字体大小相同
注：缩进的文本内容中有英文的话可能会导致对齐错误
<html>
<head>
<title>title>
<style>
p{
text-indent:1em ;font-size: 16px;
}
style>
head>
<body>
<p>你好p>
body>
html>
4. 文本对齐方式text-anlign
对齐方式：left，right，center，justify（两端对齐）
<html>
<head>
<title>title>
<style>
p{
text-align: justify;
}
style>
head>
<body>
<p>你好p>
body>
html>
- 行高：line-height=上边距+下边距+字体高度
默认行高：不是固定的，根据字体大小不断变化。
取值：1.numbei（px）
2.scale（比例值，跟字体大小成比例）
<html>
<head>
<title>title>
<style>
p{
line-height: 2;
}
style>
head>
<body>
<p>你好p>
body>
html>
- 定义字间距：letter-spacing
定义词间距：word-spacing（针对英文）
英文和数字不自动折行的问题
work-break:break-all(非常强烈的折行)
work-wrap-break-word(不那么强烈的折行，可能会产生一些空白区域)
<html>
<head>
<title>title>
<style>
p{
line-height: 2;
}
style>
head>
<body>
<p>你好p>
body>
html>
复合样式
一个CSS属性只控制一个样式，叫做单一样式
一个CSS属性控制多个样式，叫做复合样式
复合样式
写法：通过空格的方式实现
复合写法有的不要关心写法顺序（background border），有的需要
例：
- background
- border
- font（最少两个值）
weight style size family
style weight size family
weight style size/line-height family
<html>
<head>
<title>title>
<style>
div{
width: 300px ;height: 300px;
background :red no-repeat center center;
border-right:blue dashed 2px ;
font:bold italic 30px 宋体;
}
style>
head>
<body>
<div>你好div>
body>
html>
注：尽量不要混写，非要混写，先写复合样式，再写单一样式，避免被覆盖
选择器
作用：选择页面上的某一个或则某一类标签
2.1基本选择器
<1>标签选择器
标签名{}
DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
/*
会选择这个页面所有的这个标签的元素
*/
h1{color:#FFA500;}
p{color:aqua;}
style>
head>
<body>
<h1>hello worldh1>
<p>11111p>
<p>22222p>
<p>33333p>
body>
html>
<2>类选择器
class名称{}
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style
type="text/css">
/*
类选择器可以多个标签归类，同一个class可以实现复用，也可以跨标签使用
*/
.one{color:chartreuse;font-size:20px;}
style>
head>
<body>
<h1 class="one">hello worldh1>
11111p>
22222p>
<p>33333p>
body>
html>
<3>id选择器
id名称{}
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
/*
id选择器:必须保证全局唯一，不能出现同名的
*/
#one{color:#FFA500;}
#two{color:aquamarine;}
style>
head>
<body>
<h1 id="one">hello worldh1>
<p>11111p>
<p id="two">22222p>
<p>33333p>
body>
html>
<4>三种基本选择器的优先级
id选择器>类选择器>标签选择器
2.2层次选择器
1. 后代选择器：
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style>
type="text/css">
/*后代选择器中间有一个空格*/
/*选中ul下的所有p标签*/
ul p{background:green;}
style>
head>
<body>
<p>p1p>
<p>p2p>
<p>p3p>
<ul>
<li>
<p>p4p>
li>
<li>
<p>p5p>
li>
<li>
<p>p6p>
li>
ul>
body>
html>
2. 子代选择器
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style>
type="text/css">
/*子代选择器中间是一个>符号，只能选中下一代*/
/*选中body子代的p标签*/
body>p{background:green;}
style>
head>
<body>
<p>p1p>
<p>p2p>
<p>p3p>
<ul>
<li>
<p>p4p>
li>
<li>
<p>p5p>
li>
<li>
<p>p6p>
li>
ul>
body>
html>
3. 兄弟选择器
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style>
type="text/css">
/*兄弟选择器：对下不对上*/
#one+p{background:aqua;}
style>
head>
<body>
<p>p1p>
<p id="one">p2p>
<p>p3p>
<ul>
<li>
<p>p4p>
li>
<li>
<p>p5p>
li>
<li>
<p>p6p>
li>
ul>
<p>p7p>
body>
html>
4. 通用选择器
<! DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<title>title>
<style>
type="text/css">
/*通用选择器:当前选中元素向下的所有兄弟元素*/
#one~p{background:aqua;}
style>
head>
<body>
<p>p1p>
<p id="one">p2p>
<p>p3p>
<p>p3.5p>
<ul>
<li>
<p>p4p>
li>
<li>
<p>p5p>
li>
<li>
<p>p6p>
li>
ul>
<p>p7p>
<p>p8p>
body>
html>
2.3结构伪类选择器
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
/*不能使用class和id选择器*/
/*选中ul下的第一个子标签*/
ul li:first-child{
background:#00FFFF;
}
/*选中ul下的最后一个子标签*/
ul li:last-child{
background:#FF0000;
}
/*高级的结构伪类选择器，不需要掌握，要个脸熟*/
/*选中p1:先定位到父级元素，选中父级元素下的第一个孩子顺序并且是当前元素才能*/
p:nth-child(2){
background:
#b9e2fe;
}
/*选中父元素下的第二个类型*/
p:nth-of-type(1){
background:
#FFA500;
}
style>
head>
<body>
<h1>helloh1>
<p>p1p>
<p>p2p>
<p>p3p>
<ul>
<li>li1li>
<li>li2li>
<li>li3li>
ul>
body>
html>
2.4属性选择器（常用）
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
.demo a{
float:left;
display:block;
height:50px;
width:50px;
border-radius:10px;
background:#FFA500;
text-align:center;
color:#b9e2fe;
text-decoration:none;
margin-right:5px;
font:bold 20px/50px Arial;
}
/*属性选择器的格式：选中存在id属性 标签[]{}*/
/*a[id]{
background:yellow;
}*/
/*选中id=first的元素*/
/*a[id=first]{
background:#00FFFF;
}*/
/*选中class中含有links的元素*/
/*
a[class*="links"]{
background:
#FF0000;
}*/
/*选中以http开的元素*/
/*
a[href^=http]{
background:
#ddff7e;
}*/
/*选中以doc结尾的元素*/
a[href$=doc]{
background:
#f2fcfe;
}
style>
head>
<body>
<p class="demo">
<a href="https://www.baidu.com"
class="links item first"id="first">1a>
<a href="https://www.4399.com"class="links item active">2a>
<a href="123.html"class="links item">3a>
<a href="123.jpg"class="links item">4a>
<a href="123.png"class="links item">5a>
<a href="abc"class=" item">6a>
<a href="a.pdf"class="links item">7a>
<a href="abc.pdf.class="linksi tem">8a>
<a href="abc.doc"class="links item">9a>
<a href="abcd.doc"class="links item last"id="last">10a>
p>
body>
html>
3.美化页面
3.1为什么要美化页面?
- 有效的传递页面信息
- 吸引用户
- 凸显网页主题
-用于 提高体验
span标签：
重点要突出的字，用span标签套起来
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style>
.one{
font-size:50px;
}
style>
head>
<body>
莫等闲，白了少年头，<span class="one">空悲切span>。
body>
html>
3.2字体样式
font-size:字体大小
font-famliy:字体
font-weight:字体粗细
color:字体颜色
font-style:字体风格
italic字体倾斜
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
/*
body{
font-family:楷体;color:#FFA500;
}*/
h1{
color:#FF0000;
font-size:50px;
}
/*.p1{
font-weight:bolder;
}
.p2{
font-weight:bold;
}*/
/*font:字体风格 字体粗细 字体大小 字体*/
/*p{font:italic bolder 15px "楷体";}*/
style>
head>
<body>
<h1>迪迦奥特曼h1>
<p class="p1">迪迦奥特曼，日本圆谷特摄剧《迪迦奥特曼》及其衍生作品中的主角，也是首位拥有形态转化能力的奥特曼。p>
<p class="p2">不同于其他奥特曼的是，迪迦奥特曼是在地球的超古代时期就已经出现的巨人，但并非是地球出生的奥特曼。他原本是黑暗巨人，也是其中的领袖，后在超古代时期的地球警备队队长幽怜的劝说下弃暗投明，吸收了三个同伴的力量再封印了他们，最终成为光之巨人迪迦奥特曼。p>
body>
html>
3.3文本样式
1. 颜色
color:orange;
a、单词：red green blue pink
b、RGB0-F16进制 #FF0000红色 RGB(255,0,0)
c、RGBA A表示透明度 RGBA(255,0,0,0.5)；
2. 文本对齐方式
text-align:center;居左|居中|居右
3. 首行缩进
text-indent:2em;/*2em表示缩进两个字体*/
4. 行高
height:100px;
line-height:100px;
当你想行内容上下左右都居中，就把块高度和行高设置成一样的
5. 装饰
text-decoration:underline;下划线
text-decoration:line-through;中划线
text-decoration:overline;上划线
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
.a{
color:red;
text-align:center;
background:orange;
height:100px;
line-height:100px;
text-decoration:underline;
}
.b{
/*color:#FF0000;*/
color:rgb(255,0,0);
text-decoration:line-through;
}
.c{
color:rgba(255,0,0,0.5);
text-decoration:overline;
}
.p1{
text-indent:2em;
/*2em表示缩进两个字体*/
}
style>
head>
<body>
<p class="a">11111111p>
<p class="b">22222222p>
<p class="c">33333333p>
<h1>迪迦奥特曼h1>
<p class="p1">迪迦奥特曼，日本圆谷特摄剧《迪迦奥特曼》及其衍生作品中的主角，也是首位拥有形态
转化能力的奥特曼。p>
<p class="p2">不同于其他奥特曼的是，迪迦奥特曼是在地球的超古代时期就已经出现的巨人，但并非是地球出生的奥特曼。他原本是黑暗巨人，也是其中的领袖，后在超古代时期的地球警备队队长幽怜的劝说下弃暗投明，吸收了三个同伴的力量再封印了他们，最终成为光之巨人迪迦奥特曼。p>
body>
html>
3.4超伪类连接
a:link设置超链接在未被访问的样式
a:visited设置超链接在已被访问的样式
a:hover设置超链接在鼠标悬浮的样式
a:active设置超链接在鼠标点击的样式
注意：a:hover必须位于a:link和a:visited的后面
a:active必须位于a：hover后面
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
a{
text-decoration:none;
}
/*没有访问之前的样式*/
a:link{
color:black;
}
/*已被访问的样式*/
a:visited{
color:red;
}
/*鼠标悬浮状态*/
a:hover{
color:orange;
}
a:active{
color:#00FFFF;
}
style>
head>
<body>
<p><a href="#">java从入门到放弃a>p>
<p><a href="#">数据库从删库到跑路a>p>
<p><a href="#">JS从入门到入土a>p>
body>
html>
3.5阴影
/*text-shadow:阴影颜色 水平偏移 垂直偏移 阴影半径*/
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
a{
text-decoration:none;
color:#000000;
}
/*text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径*/
.one{
text-shadow:red 2px -2px 1px;
}
style>
head>
<body>
<p> <a href="#">java从入门到放弃a>p>
<p><a href="#">数据库从删库到跑路a>p>
<p class="one"><a href="#">99a>p>
body>
html>
3.6列表样式
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
#nav{
width:300px;
background:#cdcdcd;
}
.title{
font-size:18px;
font-weight:bold;
text-indent:2em;
line-height:30px;
background-color:#FF0000;
}
ul{
background:#cdcdcd;
}
/*list-style：设置列表前的样式
none去掉圆点
circle空心圆
decimal数字
square正方形
*/
ul li{
height:30px;
list-style:none;
text-indent:1em;
}
a{
text-decoration:none;
font-size:14px;
color:#000000;
}
a:hover{
color:orange;
text-decoration:underline;
}
style>
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>
<a href="#">电器a>
li>
<li>
<a href="#">食品a>
<a href="#">生鲜a>
<a href="#">医药a>
li>
ul>
div>
body>
html>
3.7背景
background-repeat
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
div{
width:800px;
height:600px;
border:10px
solidred;
background-image:url(img/44.png);
/*图片默认平铺*/
}
.div1{
background-repeat:repeat-x;/*水平平铺*/
}
.div2{
background-repeat:repeat-y;/*垂直平铺*/
}
.div3{
background-repeat:no-repeat;/*不平铺*/
}
style>
head>
<body>
<div class="div1">div>
<div class="div2">div>
<div class="div3">
div>
body>
html>
4.盒子模型
- 布局必须遵循一个规范（盒子模型）
- 页面上所有的内容都是HTML标签组成的，每一个标签都有自己的特点
- HTML里的标签可以分为三类：块级元素 行内元素 行内块元素
4.1什么盒子模型？
margin :外边距
border：边框
padding：内边距
4.2HTML标签分类
1. 块级元素
网页中类似于：p h1~h6 div
特点：
1独占一行
2.可以通过width/height设置大小
3.默认的宽度是100%,高度是0
4.可以这margin和padding
2. 行内元素
网页中类似的元素：a,span
特点：
1默认排列在一行
2行内元素不能设置width和heright,大小和内容大小一样
3行内元素如果想要实现居中，必须在父级元素上添加text-align:center;
行内元素添加text-align:center;
没有效果只能在父级元素（块元素）上设置
4行内元素的width和height默认为05设置marginpadding无效
3. 块级行内元素
具备块级元素和行内元素的特点：img
4.3边框
粗细 样式 颜色
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
.box{
width:300px;
border:1px
solidblack;
text-align:center;
margin:0
auto;
}
h2{
font-size:14px;
background-color:#009E94;
line-height:30px;
margin:0;
}
form{
background-color:#009E94;
padding-bottom:20px;
}
/*border:粗细样式颜色*/
div:nth-of-type(1)>input{
border:2px solid red;
}
div:nth-of-type(2)>input{
border:2px dashed orange;
}
div:nth-of-type(3)>input{
border:2px
doubleblack;
}
style>
head>
<body>
<div class="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>