目录
一、写CSS的三种方式
1、内部样式
使用style标签,直接把CSS写到html文件中。
此时的style标签可以放到任何位置,一般建议放到head标签里
针对的对象为整个html文件中的同一类对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
这是一个段落
</p>
<!--style标签可以放在代码的任意位置-->
<style>
p{
color:red;
font-size:30px; <!--字体大小-->
<!--{}里面的CSS属性,可以写一个也可以写多个。每个属性都是一个键值对,键和值之间使用冒号分隔,键值对之间使用分号分隔,每个键值对可以独占一行,也可以不独占一行-->
}
</style>
</body>
</html>
2、内联样式
使用style属性,针对指定的元素设置样式。
此时不需要写选择器,直接写属性键值对,这个时候的样式只是针对当前元素生效。
只针对当前对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p style="color:red; font-size:40px;">
这是一个段落
</p>
</body>
</html>
内联样式的优先级比内部样式优先级高
3、外部样式
创建一个.html文件,再创建一个.css文件,用来写格式
把CSS代码单独作为一个.css文件,再通过link属性,让html引入该css文件。
css1.html源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>
这是一个段落
</p>
</body>
</html>
style.css源码
p{
color: rgb(229, 255, 0);
font-size:100px;
}
通过在css1.html文件中使用link标签,来连接两个文件
<link rel="stylesheet" href="style.css">
href属性,描述了.css文件的地址。
运行结果
实际开发中,一般都使用外部样式来写css。
二、 CSS选择器
1、标签选择器
在{}的前面写标签名字,此时意味着会选中当前页面中所有的指定标签。
2、类选择器
创建CSS类,手动指定哪些元素应用这个类
定义类,需要使用 . 开头
引用这个类时,通过属性class属性=“类名”即可,不需要带 .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
/*此处定义了一个CSS类,名字叫做one,CSS类名定义的时候需要使用.开头*/
.one{
color:red;
}
.two{
color:green;
}
.three{
color:blue;
}
</style>
<div class="one">
这是第一个div
</div>
<div class="two">
这是第二个div
</div>
<div class="three">
这是第三个div
</div>
</body>
</html>
3、ID选择器
html页面中的每一个元素,都可以设置一个唯一的id,作为元素的身份标识。
通过操作id来选中元素。
类选择器,可以让多个元素应用同一个类。
id选择器,只能针对唯一的元素生效。同一个页面中id的值不能重复
#id名{属性值}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
#onediv{
color:red;
}
#twodiv{
color:blue;
}
</style>
<div id="onediv">
这是第一个div
</div>
<div id="twodiv">
这是第二个div
</div>
</body>
</html>
4、后代选择器
<style>
ul li{
color:red;
}
</style>
先找到ul标签,再找到ul中的li,对li中的元素进行操作。
不一定非要是子元素,只要是后代就行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
ul li{
color:red;
}
</style>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</body>
</html>
5、子选择器
只找匹配的子元素,不找孙子元素之类的,针对性更强。
选择器1>选择器2{属性}
<style>
.one>li{
color:red;
}
</style>
只在one类中的子元素里找li标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.one>li{
color:red;
}
</style>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
<ul class="one">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</body>
</html>
6、并集选择器
多组选择器应用同一个样式
选择器1,选择器2{属性}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.two,.three{
color:red;
font-size:40px;
}
</style>
<div class="one">
<a href="#" class="two">链接1</a>
<p>
<a href="#" class="three">链接2</a>
</p>
</div>
</body>
</html>
让two和three都应用同一种样式
7、伪类选择器
复合选择器的特殊用法。
前面的选择器都是选中某一元素。而伪类选择器是选中某个元素的某个特定状态。
:hover 表示鼠标悬停时的状态
:active 表示鼠标按下时的状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.one:hover{
color:red;
}
.one:active{
color:green;
}
</style>
<div class="one">
这是一个div
</div>
</body>
</html>
鼠标未悬停时,字体的颜色为黑色
悬停之后,颜色变为红色
点击之后,字体变绿
三、CSS常用属性
1、字体属性
a. font-family 设置字体家族
这个属性指定的字体,要求必须是系统已经安装了的。
如果要指定的一些特殊字体系统上没有,则不能正确显示。
这种情况一般是需要通过浏览器请求对应的服务器,获取到指定字体文件,才能设置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.one{
font-size: 40px;
font-family:'微软雅黑';
}
</style>
<div class="one">
这是一个div
</div>
</body>
</html>
b. font-size 设置字体大小
浏览器的每一个文字,都可以看作是一个方框。
如果是英文阿拉伯数字,方框比较窄。如果是中文,一般就是一个正方形。
设置font-size:20px; 即文字框高度是20px
c. font-weight 设置字体粗细
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.one{
font-size: 40px;
font-family:'微软雅黑';
font-weight:bold;
}
</style>
<div class="one">
这是一个div
</div>
</body>
</html>
d. font-style 设置文字倾斜
e. color 设置文字颜色
RGB,每种颜色都分配一个字节,每个字节的范围是0-255或者00-FF
如果每个分量的两个十六进制数字都相同,则可以把6位十六进制缩写成3位十六进制。
color:rgb(255,0,0);
color: #ff0000;
color: #f00;
color: red;
f. text-slign 设置文本对齐方式
text-align: left; //左对齐
text-align: right; //右对齐
text-align: center; //居中
g. text-decoration 设置文本装饰
text-decoration: underline; //下划线
text-decoration: none; //什么都没有,可以给a标签(超链接)去掉下划线
text-decoration: overline; //上划线
text-decoration: line-through; //删除线
h. text-indent 设置首行缩进
文本缩进的值也可以是负数,则往左缩进
text-indent: 40px;
text-indent: 2em; //em是一个相对的量,是以文字尺寸为基础设置的。
i. line-height 设置行高
line-height: 60px;
line-height:calc(100% - 50px);//这种也可以,CSS中减法运算必须加空格
2、背景属性
a. background-color 设置背景颜色
background-color: rgb(0,255,0);
background-color:rgba(212, 166, 16,0.3);//a是透明度
background-color: green;
background-color: #00ff00;
b. background-image 设置背景图片
background-image: url(图片地址)
当引入背景图片之后,默认情况下,图片是平铺的。
如果不想平铺,则使用
background-repeat: no repeat;
//或者
background-repeat: none;
禁止平铺之后,图片会出现在左上角,如果想让图片居中,则使用
background-position: center center;
//第一个是水平方向居中,第二个是垂直方向居中
//参数可以是,top,center,bottom,right,left
//也可以写成坐标的形式
background-position: 10px 50px;
设置背景图片的大小
background-size: contain; //尽可能的大,把文字都铺满
background-size: cover; //充满屏幕
//也可以使用数字
3、圆角矩形
border-radius: 50px;
当border-radius的值刚好是矩形高度height的一半时,则得到圆角矩形
如果想生成圆形,则弄一个正方形,然后border-radius设置为高的一半即可。
四、元素的显示模式
display: block; //块级元素
display: inline; //行内元素
关于块级元素和行内元素的区别(前端的经典面试题)
1.块级元素会独占一行,行内元素不独占一行。
2.块级元素的高度,宽度,内外边距都可以设置。而行内元素的高度、宽度、行高无效,内边距有效,外边距有时有效有时无效。
3、块级元素默认宽度和父元素一样宽,行内元素默认宽度和里面的内容一样宽。
五、CSS盒子模型
描述了html元素基本的布局规则。
用来控制元素与元素之间或者元素和内容之间的相对位置。
1、content:内容
2、paddig: 内边距
padding: 10px; //表示四个方向都是10px边距
padding: 10px 20px; //表示上下边距都是10,左右边距是20
padding: 10px 20px 30px 40px; //分别对应上、右、下、左(顺时针)
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
3、border: 边框
设置边框时要设置三个方面,边框的粗细,边框的颜色,边框的风格(实线solid、虚线dashed、其他的线)
border:5px rgb(0,255,0) solid
边框默认情况下会撑大盒子。如果不想把盒子撑大,则使用
box-sizing: border-box;
4、margin: 外边距
写法和padding类似
特殊用法:
把margin-left和margin-right设置为auto(让浏览器自动调节)
此时该元素就能在父元素内部居中放置
六、弹性布局
主要解决水平方向排列问题。
1、开启弹性布局
display: flex;
给要水平排列的元素的父元素设置flex
此时,弹性容器里面的元素,不再是块级或者行内元素了,而是成为了弹性元素,是遵守弹性布局的,可以设置尺寸和边距。
2、设置元素水平方向的排列方式
justify-content:flex-start;
flex-start表示靠左排列,center表示靠中间排列,flex-end表示靠右排列,space-around让元素等间距排列(左右都有空白),space-between让元素等间距排列(只有中间有空白)
3、设置元素垂直方向的排列方式
align-items: flex-end;
七、快捷键
类的注释/* */,Ctrl+/
直接输入div.one,按下enter,会自动生成一个div标签,class值为one
直接输入div#one,按下enter,会自动生成一个div标签,id值为one