全局样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这里是标题</title>
<!-- 全局定义style内的标签样式,如p标签,即定义全局p标签的样式 -->
<style type="text/css">
p{
background-color: gray;
font-size:16px;
}
</style>
</head>
<body>
<!-- 仅仅P标签生效style样式 -->
<p>p标签定义的style生效</p>
<textarea>其他空间不生效style</textarea>
</body>
</html>
类样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这里是标题</title>
<!-- 以.开头的自定义名称,使用时在便签的class内填写该自定义名称使用 -->
<style type="text/css">
.p1{
font-size: 16px;
font-family: serif;
color: red;
}
</style>
</head>
<body>
<p>张家齐见世面！亲密合影姆巴佩</p>
<!-- class引用自定义的样式 -->
<p class="p1">张家齐见世面！亲密合影姆巴佩</p>
</body>
</html>
背景样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这里是标题</title>
<style type="text/css">
body{
/*background-color: blue;*/
background-image: url("touxiang.png");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<!-- 背景样式 -->
<!--1.background-color 背景颜色
2.background-image 背景图片
3.background-repeat背景图片重复方向 repeat/repeat-x/repeat-y/no-repeat;
4.background-attachment scroll/fixed 背景是否随滚动条滚动
5.background-postion 背景图的起始位置
6.background 背景样式的属性值组合
-->
</body>
</html>
外部样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这里是标题</title>
<!-- link引用外部(css文件)样式的标签 css文件内部之间编写样式不许要style -->
<!-- rel类型 type固定样式可省略 href css文件的路径及名称-->
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
</body>
</html>
文本样式
p{
/*可以直接在color后写颜色的单词*/
color: plum;
/*直接在后面编写十六进制颜色码*/
color: #cccccc;
/*使用rgb标识*/
color:rgb(238,130,238);
}
| 属性 |
属性值 |
作用 |
| color |
表示颜色的内容 |
设置文本颜色 |
| direction |
ltr/rtl |
文本的方向/书写方向 |
| letter-spacing |
npx(可以为负数) |
字间距 |
| line-height |
npx |
行高 |
| text-aglin |
left/right/center/justify(2端对齐) |
文本对齐方向 |
| text-decoration |
none/underline/overline/line-through |
文本的修饰:下划线等 |
| text-shadow |
h-shadow/v-shadow/blur/color |
设置文本阴影 |
| text-transform |
none/capitalize/uppercase/lowercase |
改变字母大小写 |
| text-indent |
npx/nem |
首行缩进 |
p{
color: plum;
direction: ltr;
letter-spacing: 4px;
line-height: 5px;
text-align: justify;
text-decoration: line-through;
text-shadow:5px,5px,5px,red;
text-transform:uppercase;
text-indent: 2em;
}
字体样式
| 属性 |
属性值 |
作用 |
| font-family |
隶属/楷书/宋体 |
设置字体 |
| font-style |
normal/italic/oblique |
设置斜体文本 |
| font-weight |
normal/bold/100-900 |
文本的粗细 |
| font-size |
px |
字体大小 |
列表样式
| 属性 |
属性值 |
作用 |
| list-style-type |
none/disc/circle/square/decimal... |
设置列表项目的外观 |
| list-style-postion |
inside/outside |
列表符号的位置 |
| list-style-image |
url/none |
把图像设置为列表项目的标记 |
| list-style |
同前面三个 |
简写属性,涵盖以上三个列表样式属性 |
伪类
超级链接上的样式称为伪类：
- 伪类是用在超链接上的效果但超链接不是伪类；
- 伪类是选择器；
- 伪类分为状态性伪类和结构性伪类；
状态性伪类选择器：
| 属性 |
作业 |
| a:link |
未访问的链接 |
| a:visited |
已访问的链接 |
| a:hover |
鼠标移动到链接上（浮动，悬停） |
| a:active |
向被激活的元素添加样式（鼠标已按下未抬起） |
| :focus |
选择拥有键盘输入焦点的元素 |
<!DOCTYPE html>
<html>
<head>
<title>firstHtml</title>
<link rel="stylesheet" type="text/css" href="myCss.css">
</head>
<body>
<!-- #代表当前页 -->
<a href="#">伪类</a>
</body>
</html>
/*a代表便签，也可以是其他标签*/
a：link{
color: red;
}
a:visited{
color: :green;
}
a:hover{
color: gray;
size: 20px;
}
a:active{
color: black;
}
结构性伪类：
| 属性 |
作业 |
| :first-child |
选择父元素的第一个子元素 |
| :last-child |
选择某个元素的最后一个子元素 |
| :nth-child(num) |
选择某个元素的一个或多个特定的子元素 |
| :nth-last-child(num) |
选择某个元素的一个或多个特定的子元素，从这个元素的最后一个元素开始算 |
| :first-of-type |
选择一个类型元素下的第一个同类子元素 |
<!DOCTYPE html>
<html>
<head>
<title>firstHtml</title>
<link rel="stylesheet" type="text/css" href="myCss.css">
</head>
<body>
<!-- 如果加上h1则first-child失效，原因是父元素的第一个元素生效，
加上h1的话第一个元素是h1所以p元素不生效
使用first-of-type则刚好解决该问题-->
<!-- <h1>标题</h1> -->
<p>CSS</p>
<p>CSS</p>
<p>CSS</p>
</body>
</html>
p:first-child{
color: red;
}
p:last-child{
color: green;
}
伪元素选择器
| 属性 |
作业 |
| ::selection |
选择指定元素中被用户选中的内容 |
| ::before |
可以在内容之前插入新内容 |
| ::after |
可以在内容之后插入新内容 |
| ::first-line |
选择指定选择器的首行(每个标签内容的第一行) |
| ::first-letter |
选择文本的第一个字符 |
<!DOCTYPE html>
<html>
<head>
<title>firstHtml</title>
<link rel="stylesheet" type="text/css" href="myCss.css">
</head>
<body>
<p>CSS</p>
<p>CSS</p>
<p>CSS</p>
</body>
</html>
p::before{
/*content固定写法，在所有p标签的前面新增的内容*/
content: "hello,"
}
p::after{
content: "...";
}
/* *代表所有标签 */
*::selection{
background-color: red;
}
css其他选择器
| 选择器 |
作用 |
| id,* |
选择指定元素中被用户选中的内容 |
| 逗号选择器 |
联合选择器 |
| 空格选择器 |
子孙（后代）选择器 |
| >选择器 |
子选择器（不是后代） |
| +选择器 |
相邻兄弟选择器 |
| [] |
属性选择器 |
id选择器
<p id="name1">CSS</p>
<p id="name2">CSS</p>
<p>CSS</p>
/* id选择器在前面加#号*/
#name1{
color: red;
}
#name2{
color: gray;
}
*号选择器
/* body内所有的标签内容*/
*{
font-size: 20px;
color: blue;
}
逗号选择器
//将不同id或其他标识的组合在一起，和class效果一样
#name1,#name2,p{
color: red;
}
空格选择器
<!DOCTYPE html>
<html>
<head>
<title>firstHtml</title>
<link rel="stylesheet" type="text/css" href="myCss.css">
</head>
<body>
<!-- div是一个容器标签，成对出现 -->
<div id="div1">
<p id="name1">CSS1</p>
<div id="div2">
<p id="name1">CSS2</p>
</div>
</div>
<p>CSS</p>
</body>
</html>
/* 空格选择器 父容器+空格+子元素则为父元素下子孙后代的所有子元素生效*/
#div1 p{
color: red;
}
>选择器
<div id="div1">
<p id="name1">CSS1</p>
<div id="div2">
<p id="name1">CSS2</p>
</div>
</div>
<p>CSS</p>
/* >选择器 父容器+>+子元素则为父元素下第一代的所有子元素生效，再下一代的不生效*/
#div1>p{
color: red;
}
+号选择器
<div id="div1">
<p id="name1">CSS1</p>
<div id="div2">
<p id="name1">CSS2</p>
</div>
</div>
<p>CSS</p>
/* +选择器 父容器+“+”+子元素则为父元素统计元素生效*/
#div1+p{
color: red;
}
[]属性选择器
<p class="name1">CSS1</p>
<p class="name2">CSS2</p>
<p>CSS</p>
/* []选择器*/
p[class="name1"]{
color: red;
}
css选择器优先级：作用范围越小优先级越高
