1.行内添加
<p style="color: red">
天使投资指早期投资,尤其指个人早期投资
</p>
2.内嵌样式
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style type="text/css">
p{
color: red;
}
</style>
</head>
<body>
<p>
天使投资指早期投资,尤其指个人早期投资
</p>
</body>
</html>
3.单独文件
4.优先级 就近原则
5.标签选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mysite</title>
<style type="text/css">
body{
background-color: #ccc;
text-align: center;
font-size: 12px;
}
h1{
font:"黑体";font-size: 20px;}
p{
color: red;font-size: 15px;}
hr{
width: 200px;}
</style>
</head>
<body>
<h1>武汉加油</h1>
<hr>
<p>中国加油</p>
2020/2/7
</body>
</html>
6.类别选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mysite</title>
<style type="text/css">
p {
font-size: 12px;}
.one{
font-size: 18px;}
.two{
font-size: 24px;}
</style>
</head>
<body>
<p class="one">one</p>
<p class="one">one</p>
<p class="two">two</p>
<p class="two">two</p>
<p>putong</p>
</body>
</html>
7.ID选择器<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mysite</title>
<style type="text/css">
p {
font-size: 12px;}
#one{font-size: 18px;}
#two{font-size: 24px;}
</style>
</head>
<body>
<p id="one">one</p>
<p id="two">two</p>
<p>putong</p>
</body>
</html>
8.ID选择器 与class的区别唯一性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mysite</title>
<style type="text/css">
p {
font-size: 12px;}
#one{font-size: 18px;}
#two{font-size: 24px;}
</style>
</head>
<body>
<p id="one">one</p>
<p id="two">two</p>
<p>putong</p>
</body>
</html>
9.嵌套声明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mysite</title>
<style type="text/css">
p span{
color: red;
}
</style>
</head>
<body>
<p><span>武汉加油</span>中国加油</p>
</body>
</html>
10.集体声明
<style type="text/css">
h1,p{
text-align: center;}
</style>
11.全局声明
<style type="text/css">
*{
text-align: center;}
</style>
12.混合
13.单位
14.颜色 rgb
15.文本
color 文本颜色 letter-spacing 字符间距 line-height 行高
text-align 对齐 text-decoratin 装饰线 text-indent 首行缩进
font 在一个声明中设置所有的字体属性(font:italic bold 16px/1.5em 宋体)
font-family 字体系列 font-size 字号 font-style 斜体(italic) font-weight 粗体(bold)
16.背景属性
url("logo.jpg")
repeat 横向纵向都填充 repeat-x 横向填充 no-repeat 一张图 repeat-y 纵向填充
17.链接的四种状态
a:link 普通的、未被访问的链接 a:visited 用户已访问的链接
a:hover 鼠标指针位于链接的上方悬停 a:active 链接被点击的时刻
:伪类选择器
18.a:hover 必须位于a:link a:visited后面
a:active 必须位于a:hover之后
19.鼠标悬停放大字体
a{
font-size:22px;
}
a:hover{
font-size:120%;
}
<a href="#">web design</a>
20.无序列表ul 有序列表ol
list-style
list-style-image 为列表项标志设置图像
list-style-position 标志的位置
list-style-type 标志的类型
21奇偶选择器
tr:nth-child(odd){
background-color:#EAF2D3;
}
CSS基础用法
猜你喜欢
转载自blog.csdn.net/cherry12100511/article/details/104835080
今日推荐
周排行