css是一种样式表语言,为html标签修饰定义外观,分工不同
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="css/demo.css" rel="stylesheet"/>
<style>
/*cssx注释
内嵌样式表
*/
/*标签选择器*/
a{
color: mediumaquamarine;
}
/*类选择器*/
.p1{
color: red;
}
/*通配选择器 选中所有标签*/
*{
color: black;
font-size: 24px;
}
/*id选择器*/
#aid{
color: blueviolet;i
}
</style>
</head>
<body>
<!--行内样式表，只能对所在标签进行修饰，优先级最高-->
<!--优先级：行内样式表>id选择器>类选择器>标签选择器>通配选择器-->
<a class="p1" href="https://aqtw.qq.com/" target="_blank" style="font-family: 楷体;">启动</a>
<a class="p2" href="https://aqtw.qq.com/" target="_blank" style="font-family: 楷体;">启动</a>
<a href="https://aqtw.qq.com/" target="_blank" style="font-family: 楷体;">启动</a>
<a id="aid" href="https://aqtw.qq.com/" target="_blank" style="font-family: 楷体;">启动</a>
<a href="https://aqtw.qq.com/" target="_blank" style="font-family: 楷体;">启动</a>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.p1{
color: aqua;/*字体颜色*/
font-size: 24px;/*字体大小*/
font-family: 楷体;/*字体格式*/
font-weight: 200;/*加粗*/
text-align: center;/*文字水平对齐*/
font-style: italic;/*斜体文本*/
text-decoration: underline;/*修饰文本下添加下划线*/
text-decoration: line-through;/*修饰文本，添加删除线*/
line-height: 50px;/*设置行高*/
word-spacing: 20px;/*英文单词间距*/
text-indent: 20px;/*缩进字体间距*/
}
a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
color: #00aa7f;
}
</style>
</head>
<body>
<p class="p1">就一个区域,拥有许多输入和选择组件,让用户可以输入选择信息最终将数据提交到服务器</p>
<a href="">启动</a>
<a href="">启动</a>
<a href="">启动</a>
</body>
</html>设置背景
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
background-color: aqua;/*背景颜色*/
background-image: url(img/pear.jpg);/*添加背景图片*/
background-repeat: no-repeat;/*背景不重复*/
background-position: center;/**/
background-size: 400px 400px;
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<p>你好</p>
</body>
</html>列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.u1 li{
color: aqua;
list-style-type: none;
list-style-image: url(img/pear.jpg);
list-style-position: inside;/*图标位置 是在列表里面还是列表外面 outside*/
list-style: url(img/pear.jpg) outside none;
}
</style>
</head>
<body>
<ul class="u1">
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ul>
<ul class="u2">
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ul>
</body>
</html>
css伪类
● CSS伪类专门用来表示标签的一种的特殊的状态，当我们需要为处在这些特殊状
态的标签设置样式时，就可以使用伪类 。
● 伪类的语法：
:hover伪类表示鼠标移入的状态
:active表示的是被点击的状态
:focus向拥有键盘输入焦点的标签添加样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.a1:hover{
color: aqua;
font-size: 24px;
}
.a2:active{
color: red;
font-size: 24px;
}
.a3:active{
background-color: blue;
}
p:hover{
color: chocolate;
background-color: beige;
}
input:focus{
background-color: aqua;
color: brown;
}
img:hover{
opacity: 0.5;
weight:400px;
height: 400px;
}
img{
opacity: 1;
weight:400px;
height: 400px;
}
</style>
</head>
<body>
<a class="a1" href="">启动</a>
<a class="a2" href="">启动</a><br />
<p>你好</p>
<input type="button" value="保存" class="a3"/><br />
<input /><br />
<img src="img/IP.jpg"/>
</body>
</html>透明
● 定义透明效果的属性是 opacity。
opacity 属性设置标签的不透明级别 值为1。
规定不透明度：从 0.0 （完全透明）到 1.0（完全不透明）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img:hover{
opacity: 0.5;
weight:400px;
height: 400px;
}
img{
opacity: 1;
weight:400px;
height: 400px;
}
</style>
</head>
<body>
<img src="img/IP.jpg"/>
</body>
</html>
块级，行级，行级块标签
块级标签：无论内容多少，都会独占一行 可以设置宽高 主要用来设计网页布局
行级标签：只占自身大小的标签，不会占一行 设置宽高也无效 主要对网页的文字进行修饰
行级块标签：不占一行，又可以设置宽高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
块级标签：无论内容多少，都会独占一行
可以设置宽高
主要用来设计网页布局
例如 p，h，ul
div--是一种块级标签，没有任何的附加样式，给他设计什么样式就可以有什么样式
-->
<p style="background-color: aqua; width: 200px; height: 200px;" >你好</p>
<div style="background-color: aqua; width: 200px; height: 200px; margin-top: 10px;"> 标签是一种纯净版的块级标签</div>
<!--
行级标签：只占自身大小的标签，不会占一行，设置宽高也无效
例如：a，b，s，i
主要对网页的文字进行修饰
span标签
span是行级标签
span 没有任何附加功能，给了什么属性就能变成什么样。
span标签被用来选中文档中的文字。
-->
<a href="" style="width: 200px; height: 100px;">启动</a>
<span style="color: aqua; font-style: inherit; text-decoration: underline;">span是一种纯净版的行级标签</span>
<!--
常用标签
a,span,div,表格，表单
-->
<!--
行级块标签：不占一行，又可以设置宽高
例如 img input
-->
<img width="100" height="100" src="img/IP.jpg"/>
<input style="width: 400px; height:15px;"/>
</body>
</html>Display
● 通过display样式可以修改标签的类型。
可选值：
block ：设置标签为块标签
inline ：设置标签为行级标签
inline-block ：设置标签为行级块标签
none ：隐藏标签（标签将在页面中完全消失）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--p本来是块级标签，独占一行，使用display:inline 将它设置为行级标签-->
<p style="background-color: aqua; width: 200px; height: 200px; display: inline; " >你好</p>
<div style="background-color: aqua; width: 200px; height: 200px; margin-top: 10px; display: inline;"> 标签是一种纯净版的块级标签</div>
</body>
</html>盒子模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
background-color: aqua;
/*width和height只是设置内容区的大小，不是标签的大小*/
width: 100px;
height: 100px;
/*设置内边距*/
padding-top: 10px;上
padding-bottom: 10px;下
/*padding: 10px 20px 15px 20px 上右下左*/;
/*padding: 15px 20px;上下 左右 */
/*内容大小=内容区+内边框+边框*/
/* 设置外边距
margin: 300px 600px;上下 左右
*/
}
</style>
</head>
<body>
<!--
盒子模型
每个标签都像一个盒子，网页布局其本质就是摆放盒子
每个盒子又分成了4个区域：
内容区：放内容的区域
内边框：内容区到边框的距离
边框：标签的最外层
外边框：一个标签距离另一个标签之间的距离
-->
<div class="box">盒子模型</div>
<div class="box">新闻热点</div>
</body>
</html>文档流
● 文档流指的是文档中的标签在排列时所占用的位置。 将窗体自上而下分
成一行行 ，并在每行中按从左至右的顺序排放标签，即为文档流。
● 也就是说在文档流中标签默认会紧贴到上一个标签的右边，如果右边不
足以放下标签，标签则会另起一行，在新的一行中继 续从左至右摆放。
● 这样一来每一个块标签都会另起一行，那么我们如果想在文档 流中进行
布局就会变得比较麻烦
定位
相对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1{
background-color: red;
width: 100px;
height: 100px;
position: relative;/* 开启了相对定位 只开启了相对定位，不设置偏移，标签不会变化 */
left: 100px;/* 相对定位是以自身的位置为参照物定位的，不会让标签脱离文档流 */
}
.box1{
background-color: green;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box1">div1</div>
<div class="box2">div2</div>
</body>
</html>绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1{
background-color: red;
width: 100px;
height: 100px;
position: absolute;/* 开启了绝对定位，立即脱离文档流 */
left: 100px;
/* 移动时的参照物：
离他最近的 开启了定位的父级标签，如果所有的父级标签都没有开启定位，那么他以浏览器的
边框为参照物。一般情况开启另一个标签的绝对定位，都会开启父级标签的相对定位
*/
}
.box1{
background-color: green;
width: 100px;
height: 100px;
}
.main{
width: 200px;
height: 200px;
background-color: beige;
position: relative;
}
</style>
</head>
<body>
<div class="main">
<div class="box1">div1</div>
</div>
<div class="box2">div2</div>
</body>
</html>
6949
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
