Web Day2
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>
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！