Web
day2_2023.9.7
Css
概念:层叠样式单
作用:主要用来美化页面,完成网页的布局设置,完成字体,颜色等标签样式的设置。
块元素和行内元素
块元素 : 单独成一行的标签,将来可以设置宽和高,h1-h6 , p , div, 列表,表格
行内元素 : 标签中的内容,并排显示,不能设置宽和高, a , b, i, span
行内块元素:既有块元素的特点,又有行内元素的特点,并排显示,可以调整宽高,img,input
Css的使用
1,行内使用
2,文档内部使用
3,外部引用
h2{
color: #ff00ff;
font-size: 50px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 在head中,加上一对style标签,将样式写在标签中 */
/* 通过选择器可以找到标签,找到标签后,可以添加样式 */
div{
color: blue;
font-size: 40px;
}
h1{
color: #81efff;
}
</style>
<!-- 通过link标签完成css文件的引入 -->
<link rel="stylesheet" href="css/test.css">
</head>
<body>
<!-- css行内的用法,直接在开始标签中,添加style属性 -->
<p style="color: red;font-size: 30px;">这是一段文本内容</p>
<!-- css文档内部使用方式,配合选择器来使用 -->
<div>这是一段文本内容</div>
<h1>这是一个标题</h1>
<!-- css外部引入的使用方式 -->
<h2>这是外部引用改变样式的标签</h2>
</body>
</html>
Css的特性
1,层叠
1个html标签可能会有很多个样式,生效的只有一个,可以通过权重值,觉得到低生效的是哪一个
权重值 : 从0开始计算,
行内样式 + 1000 ,
id选择器 +100,
属性选择器、class选择器、伪类选择器 + 10
标签选择器、伪元素选择器 + 1
!important +1000
2,继承
有些样式,父标签设置之后,内部嵌套的子标签,也能获得样式效果
Css选择器
选择器的作用 : 就是用来找到html中某个具体的标签,并通过样式属性给这个标签加上指定的样式
写法 : 选择器 { 样式属性 : 样式的值 }
简单选择器(根据名称、id、类来选取元素)
CSS 元素选择器
直接以标签名来选择
CSS id 选择器
通过标签指定的id属性值来选择
写法: #id值{ }
CSS 类选择器
通过标签指定的class属性来选择
写法 : .class值{ }
CSS 通用选择器
**
写法:*{ }
CSS 分组选择器
多个选择器写在一起的写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{ /*标签选择器*/
color: red;
}
#mydiv{ /*id选择器,选择指定id值的*/
color: blue;
}
.myclass{ /*class选择器*/
color: coral;
}
*{ /*选择全部的标签*/
font-size: 50px;
}
#mydiv,.myclass,p{ /*选择多个选择器,并设置样式*/
background-color: darkgray;
}
</style>
</head>
<body>
<div>这是普通的div标签中的内容</div>
<div id="mydiv">这个是div中包含id属性的内容展示</div>
<div class="myclass">这个是div中包含class属性的内容展示</div>
<p>这是p标签的内容</p>
<span>这是span标签内容</span>
</body>
</html>
组合器选择器(根据它们之间的特定关系来选取元素)
后代选择器 (空格):选择某个标签的后代标签
写法 : 父标签 后代标签{}
子选择器 (>) : 选择某个标签的子代标签
写法 : 父标签>子标签
相邻兄弟选择器 (+) : 选择相邻的标签
写法: 标签a+标签b
兄弟选择器 (~) : 选择同一个层级的标签
写法 : 标签a~标签b
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*后代选择器 空格*/
div span{
color: red;
}
/* 子代选择器 */
div>span{
font-size: 30px;
}
/* 相邻兄弟 选择器 + ,找某个标签下面相邻的标签*/
p+span{
background-color: aquamarine;
}
/* 兄弟选择器 ~ */
p.myclass~#mydiv{
background-color: yellow;
}
</style>
</head>
<body>
<div>这是父级div标签1
<p class="myclass">这是div的子标签p2
<span>这是p标签的子类span,div的后代3</span>
</p>
<span>
这个span是div的子标签span4
</span>
<div id="mydiv">
这是外层div的子标签div5
</div>
</div>
</body>
</html>
伪类选择器(根据特定状态选取元素)
伪元素选择器(选取元素的一部分并设置其样式)
所有 CSS 伪类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a:link{ /*没访问过的*/
color: red;
}
a:visited{ /*已访问过的*/
color: aqua;
}
a:hover{ /*鼠标滑过内容*/
background-color: orange;
}
a:active{ /*选中某个链接(鼠标按住)*/
color: blue;
}
div:hover+p{
display: none;
}
p::before{
content: "abc";
color: blue;
}
p::selection{
background-color: green;
}
</style>
</head>
<body>
<a id="taobao" href="http://www.taobao.com">淘宝</a>
<a id="jd" href="http://www.jd.com">京东</a>
<a id="baidu" href="http://www.baidu.com">百度</a>
<a id="qq" href="http://www.tecent.com">腾讯</a>
<div>这是div块的内容</div>
<p>这是p标签的内容</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul :first-child{
color: red;
}
ul li:last-child{
color: blue;
}
ul li:nth-child(3){
color: orange;
}
ul li:first-of-type{
font-size: 30px;
}
ul li:last-of-type{
font-size: 40px;
}
ul li:nth-of-type(4){
font-size: 30px;
}
</style>
</head>
<body>
<ul>
<p>这是ul子代p</p>
<li>li标签的第1行内容</li>
<li>li标签的第2行内容</li>
<li>li标签的第3行内容</li>
<li>li标签的第4行内容</li>
<li>li标签的第5行内容</li>
<li>li标签的第6行内容</li>
<li>li标签的第7行内容</li>
<li>li标签的第8行内容</li>
</ul>
</body>
</html>
所有 CSS 伪元素
属性选择器(根据属性或属性值来选取元素)
所有 CSS 属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a[name]{
color: red;
}
a[class='baidu']{
color: aqua;
}
a[class~=jd]{
color: orange;
}
a[class|=jd]{
background-color: darkgray;
}
a[href^=www]{
color: red;
}
a[href$=cn]{
color: cornflowerblue;
}
a[href*=jd]{
color: salmon;
}
</style>
</head>
<body>
<a name="hello" class="taobao" href="http://www.taobao.com">淘宝</a>
<a class="jingdong jd" href="http://www.jd.com">京东</a>
<a class="baidu jd" href="www.baidu.com">百度</a>
<a class="jd qq baidu" href="http://www.tecent.cn">腾讯</a>
</body>
</html>
CSS样式
CSS背景
CSS 背景属性用于定义元素的背景效果
background-color 属性指定元素的背景色
background-image 指定用作元素背景的图像
background-repeat 指定背景图片后,可以设置背景图片是否重复
background-attachment 指定背景图像是应该滚动还是固定的
background-position 设置背景图像的起始位置。
background-size 规定背景图像的尺寸。
background 在一条声明中设置所有背景属性的简写属性。
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inher
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
background-color 属性指定元素的背景色
background-image 指定用作元素背景的图像
background-repeat 指定背景图片后,可以设置背景图片是否重复
background-attachment 指定背景图像是应该滚动还是固定的
background-position 设置背景图像的起始位置。
background-size 规定背景图像的尺寸。
background 在一条声明中设置所有背景属性的简写属性。
*/
div.div1{
width: 200px;
height: 200px;
/* background-color: rgba(100, 100, 100,0.5); */
/* background-image: url(img/2.jpg); */
/* background-size: 100px 100px; */
/* background-repeat: no-repeat; */
/* background-attachment: scroll; */
/* background-position: center; */
background: red;
}
</style>
</head>
<body>
<div class="div1">
</div>
</body>
</html>
CSS 字体属性
font 简写属性。在一条声明中设置所有字体属性。
font-family 规定文本的字体系列(字体族)。
font-size 规定文本的字体大小。
font-style 规定文本的字体样式。
font-variant 规定是否以小型大写字母的字体显示文本。
font-hweight 规定字体的粗细。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 字体 */
div{
color: red;
font-size: 30px;
font-weight: 900;
font-family: "宋体";
font-style: italic;
font-variant: small-caps;
}
</style>
</head>
<body>
<div>内容wenben</div>
</body>
</html>
CSS 文本属性
direction 指定文本的方向 / 书写方向。
letter-spacing 设置字符间距。
line-height 设置行高。
text-align 指定文本的水平对齐方式。
text-decoration 指定添加到文本的装饰效果。
text-indent 指定文本块中首行的缩进。
text-shadow 指定添加到文本的阴影效果。
text-transform 控制文本的大小写。
text-overflow 指定应如何向用户示意未显示的溢出内容。
vertical-align 指定文本的垂直对齐方式。
white-space 指定如何处理元素内的空白。
word-spacing 设置单词间距。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
direction 指定文本的方向 / 书写方向。
letter-spacing 设置字符间距。
line-height 设置行高。
text-align 指定文本的水平对齐方式。
text-decoration 指定添加到文本的装饰效果。
text-indent 指定文本块中首行的缩进。
text-shadow 指定添加到文本的阴影效果。
text-transform 控制文本的大小写。
text-overflow 指定应如何向用户示意未显示的溢出内容。
vertical-align 指定文本的垂直对齐方式。
white-space 指定如何处理元素内的空白。
word-spacing 设置单词间距。
*/
div{
width: 200px;
height: 200px;
background: #b0ccff;
/* direction: rtl; */
/* letter-spacing: 5px; */
/* line-height: 60px; */
/* text-align: center; */
/* text-decoration: none; */
text-indent: 30px;
/* text-shadow: 5px 5px 5px rgba(10, 20, 30, 0.5); */
text-transform: uppercase;
/* 这是文本超出的省略号效果,三个一起用 */
text-overflow: ellipsis;/*设置文本超出范围省略号效果*/
overflow: hidden; /*块内容溢出的处理*/
white-space: nowrap; /*设置内容是否换行*/
}
p{
width: 200px;
height: 50px;
background: orange;
text-align: center;
/*line-height: 50px; /*单行文本上下居中*/
vertical-align: middle;
}
a{
text-decoration: none;
color: black;
}
a:hover{
color: blue;
text-decoration: underline;
}
</style>
</head>
<body>
<div>
Abcd EFG文本内容文本内容文本内容文本内容文本内容文本内容
</div>
<p>
文本内容
</p>
<a href="">链接到指定地址</a>
</body>
</html>
CSS 列表属性
list-style 简写属性。在一条声明中设置列表的所有属性。
list-style-image 指定图像作为列表项标记。
list-style-position 规定列表项标记(项目符号)的位置。
list-style-type 规定列表项标记的类型。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul{
/* list-style-image:url(img/123.png); */
/* list-style-position: outside; */
/* list-style-type: none; */
list-style: none;
}
li{
background-color: aquamarine;
}
</style>
</head>
<body>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</body>
</html>
CSS 表格属性
border 简写属性。在一条声明中设置所有边框属性。
border-collapse 规定是否应折叠表格边框。
border-spacing 规定相邻单元格之间的边框的距离。
caption-side 规定表格标题的位置。
empty-cells 规定是否在表格中的空白单元格上显示边框和背景。
table-layout 设置用于表格的布局算法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table,td{
width: 400px;
border: 1px solid #000;
border-collapse : collapse;
/* border-spacing: 5px; */
/* caption-side: bottom; */
empty-cells: hide;
/* table-layout: fixed; */
}
tr{
background-color: darkgray;
}
td{
background-color: aquamarine;
text-align: center;
}
</style>
</head>
<body>
<table>
<caption>标题</caption>
<tr>
<td>列1</td>
<td>列2</td>
<td>列3</td>
</tr>
<tr>
<td>列1</td>
<td>列2</td>
<td>列3</td>
</tr>
</table>
</body>
</html>
CSS 布局 - display 属性
display属性的值
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为行内元素,元素前后没有换行符。
inline-block 行内块元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: aqua;
display: inline-block;
}
span{
width: 100px;
height: 100px;
background-color: red;
display: block;
}
</style>
</head>
<body>
<div>
abc
</div>
<span>
abc
</span>
<span>
xyz
</span>
</body>
</html>
CSS 布局 - 浮动和清除
CSS float 属性规定元素如何浮动。
float 属性可以设置以下值之一:
left - 元素浮动到其容器的左侧
right - 元素浮动在其容器的右侧
none - 元素不会浮动(将显示在文本中刚出现的位置)。默认值。
inherit - 元素继承其父级的 float 值
CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul{
width: 90%;
height:50px;
background-color: orange;
}
li{
list-style: none;
float: left;
height: 50px;
line-height: 50px;
width: 147px;
text-align: center;
/* background-color: orangered; */
color: #fff;
font-weight: 900;
font-size: 16px;
}
li:hover{
background-color: orangered;
}
</style>
</head>
<body>
<ul>
<li>主体导航</li>
<li>9.9包邮</li>
<li>好货让利榜</li>
<li>大额优惠券</li>
<li>母婴榜</li>
<li>品牌尖货</li>
<li>特惠宝贝</li>
<li>潮流范</li>
<li>有好货</li>
</ul>
</body>
</html>