一、CSS的引入方式
行内样式 ：通过
style
属性
内嵌样式：
style
标签
外链样式：
link
标签进行导入
导入样式：
@import url("")
，但是注意的是要放到
style标签内
四者遵循最近原则
1.行内样式
1.行内样式
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1 style="color:red;font-size:12px">这是我的第一个css文件</h1>
</body>
</html>
2.内嵌样式
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
h1{
color: blue;
font-size: 15px;
}
</style>
</head>
<body>
<h1>内嵌样式书写</h1>
</body>
</html>
3.外链样式
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="..\1.css">
</head>
<body>
<h1>外链样式书写</h1>
</body>
</html>
4.导入样式
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
@import url("../1.css");
</style>
</head>
<body>
<h1>导入样式书写</h1>
</body>
</html>
二、选择器
1.基本选择器
标签选择器（根据标签的名称获取）
ID
选择器（获取的是
ID
属性）
类选择器 （
class
属性）
通用选择器（通配符）
<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
/*div{
color: red;
}*/ （
标签选择器）
/*#one{
color: blue;
}*/
（ID选择器）
/*.two{
color: yellow;
}*/
（类选择器）
*{
color
:
green
;
}
（通用选择器）
</style>
</head>
<body>
<div id="one" class="two">
这是第一个div
</div>
<div >
这是第一个div
</div>
</body>
优先级：ID > class > 标签 > 通配符
2.包含选择
子代选择器（获取的是某个标签的第一级子标签）
后代选择器（获取的某个标签里面所有的子标签）
分组选择（逗号选择器，可以同时设置多个标签，使用逗号进行分割）
<!DOCTYPE html>
<html>
<head>
<title>
选择器
</title>
<style
type
=
"text/css"
>
/*
子代选择器
*/
div
.list
>
ul
{
border
:
1px
solid
red
;
}
/*
后代选择器
*/
.list
li
{
border
:
1px
solid
blue
;
}
/*
逗号择器
*/
.one
,
.two
,
#first
{
color
:
green
;
width
:
200px
;
height
:
200px
;
background
:
pink
;
border
:
1px
solid
black
;
}
</style>
3.属性选择
<!DOCTYPE html>
<html>
<head>
<title>
选择器
</title>
<style
type
=
"text/css"
>
/*
选择选中的额标签中存在的某个属性
*/
div
[
title
]{
border
:
1px
solid
black
;
}
/*
确切的等于某个值
*/
input
[
type
=
"text"
]{
background
:
red
;
}
/*
属性值包含某个值
*/
input
[
type
*=
"e"
]{
background
:
blue
;
}
/*
属性值以某个值开头
*/
input
[
type
^=
"e"
]{
}
/*
属性值以某个值结尾
*/
input
[
type
$=
"rl"
]{
background
:
red
;
}
/*+
表示下一个标签
*/
.msg
+
p
{
border
:
1px
solid
green
;
}
/*
属性等于某个属性值
*/
[
title
=
"
这是一个标题
"
]{
color
:
red
;
}
</style>
4.伪类选择器
link——
链接点击之前
visited——
链接点击之后
hover ——"
悬停
"
active ——"
激活
"
鼠标点击的时候但是不松手
<!DOCTYPE html>
<html>
<head>
<title></title>
<style
type
=
"text/css"
>
/*
点击之前的颜色
*/
a
:
link
{
color
:
red
;
}
/*
点击之后的颜色
*/
a
:
visited
{
color
:
green
;
}
/*
鼠标悬停的颜色
*/
a
:
hover
{
color
:
blue
;
/*
鼠标点击在上面但是不松手的时候
*/
a
:
active
{
color
:
pink
;
}
</style>
*四者不可以调换顺序，否则上一级失效！
5.伪元素选择器
注意：要使用伪元素选择器一定要加上content属性
<!DOCTYPE html>
<html>
<head>
<title></title>
<style
type
=
"text/css"
>
p
::
before
{
content
:
"
张三
"
;
color
:
red
;
}
p
::
after
{
content
:
"
李四
"
;
color
:
green
;
}
</style>
6.附
设置字号 ---- font-size:12px;
设置颜色------ color : 英文单词 #rrggbb;
设置字体------ font-family:“宋体”；
设置行高 ------ line-height:150% 1.5em;
扫一扫
823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
