1.文本
.p1{
color: #008000; //字体颜色
font-size: 18px; //字体大小
font-family: 楷体;//字体
/* text-align: right; 水平对齐方式*/
/* text-decoration: line-through; 删除线效果 */
text-decoration: underline;
/*text-decoration:none; 定义标准的文本*/
/* font-style: italic; 斜体文本 */
font-weight: bold;/*字体粗细*/
/* letter-spacing: 10px; 字符之间的间距 (适用于中文)*/
/*line-height: 50px;行高*/
text-indent:2em;/*段落首行缩进 em ==*/
}
#pId{
word-spacing: 20px; /*单词之间的间隔*/
letter-spacing/*可以指定字符间距*/
}
a{
text-decoration: none;
}
<p class="p1">
祖先标签上的样式，也会被他的后代标签所继承, 利用继承，可以将一些基本的样式设置给祖先标签，
这样所有的后代标签将会自动继承这些样式。祖先标签上的样式，也会被他的后代标签所继承, 利用继承，可以将一些基本的样式设置给祖先标签，
这样所有的后代标签将会自动继承这些样式。
</p>
<p id="pId">
hello world
</p>
<a href="">百度</a>
<a href="">百度</a>
<a href="">百度</a>
<a href="">百度</a>
<a href="">百度</a>
2.背景
p{
width: 800px;
height: 600px;
background-color: green;/*背景颜色*/
background-image: url(img/bg.jpg);/*背景图片的优先级 高于 背景颜色,背景图片不占标签空间*/
background-repeat: no-repeat; /*设置背景重复 repeat-x, repeat-y*/
/* background-size: 800px 600px; */
background-size: 400px;/*背景尺寸*/
background-position:center;/*背景位置*/
}
3.CSS列表
.u1>li{
/*list-style-type:none; 设置列表项标志的类型
list-style 简写属性
list-style-image: url(img/img.jpg); 将图像设置为列表项标志
list-style-position: inside;控制列表项图标位置*/
/* 简写方式 值的顺序 无序的 */
list-style: outside none url(img/img.jpg) ;
text-align: center;
}
<ul class="u1">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
4.CSS伪类
/* 伪类:就是css为处在不同状态(例如鼠标移动到标签上,鼠标点击标签)下的标签设置样式*/
/* 表示未访问的连接地址 */
a:link{ /*表示普通的链接（没访问过的链接）*/
color: #008000;
text-decoration: none;
}
/* 访问过的状态 */
a:visited{
/*表示访问过的链接
浏览器是通过历史记录来判断一个链接是否访问过
使用visited伪类只能设置字体的颜色 */
color: #FF0000;
}
/* 伪类表示鼠标移动到标签上 */
a:hover{
color: blue;
text-decoration: underline;
}
/* 鼠标点击状态 */
a:active{
color: #00FFFF;
}
p:hover{
color: white;
background-color: #00FFFF;
}
p:active{
background-color: #FF0000;
}
.btn:hover{
background-color: #00FFFF;
}
.btn:active{
background-color: #0000FF;
}
注意：:visited放在:hover之前
:active 必须被置于 :hover 之后，才是有效的
:hover和:active也可以为其他标签设置
/* 针对于可以输入内容的标签 ，向拥有键盘输入焦点的标签添加样式*/
.inp:focus{
background-color: #FFA500;
}
<p>
这是一个段落
</p>
<input type="button" value="保存" class="btn"/>
<input type="text" class="inp"/>
<input type="text" class="inp"/>
5.透明
定义透明效果的属性是 opacity。
opacity 属性设置标签的不透明级别 值为1。
规定不透明度：从 0.0 （完全透明）到 1.0（完全不透明）。
6.块级，行级，行级块标签
什么是块级标签？
块级标签：无论内容多少 都会***独自占据一行***的
可以设置宽高
默认宽高： 与父级标签一致
高：0/与内容一致
例如<p>、<h1>、<ul>、<ol>、<hr/>等。
什么是行级标签？
行级标签：只占自身大小的标签，不会占一行。
例如<font>、<b>、<i>、<a>等。
什么是行级块标签？
可以设置宽高，不独占一行
例如 <input/> <img>等
注意： 一般情况下使用块级标签包含行级标签，不使用行级标签包含块标签。
a可以包含任何标签，除去a本身；
p标签不可以包含任何的块标签。
7.Display
/*通过display样式可以修改标签的类型*/
block ：设置标签为块标签
inline :设置标签为行级标签
inline-block :设置标签为行级块标签
none ：隐藏标签（标签在页面中完全消失）
8.div和span
div标签
div是块级标签，可以放置任何标签。
div没有任何附加功能，给了什么属性就能变成什么样。
div主要的作用是被用来布局网页。
span标签
span是行级标签
span 没有任何附加功能，给了什么属性就能变成什么样。
span标签被用来选中文档中的文字。
9.盒子模型（box-model）
有四个模块
1、内容区
/*斜体样式标签 中的文本内容，子标签都是存在于内容区中的。
如果没有为标签设置内边距和边框，则内容区大小 默认和盒子大小是一致的。
通过width和height两个属性可以设置内容区的大小而不是整个盒子的大小。
width和height属性只适用于块标签(包含行级块)。*/
2.内边距 padding
内边距：标签内容区与边框以内的空间，会影响整个盒子的大小。
padding-left:2px; 左内边距
padding-right:2px; 右内边距
padding:10px 2px; 上下、左右内边距
padding:1px 2px 6px 5px； 上、右、下、左四个方向的内边距。
3.边框
solid 、 dotted 、dashed、double 、groove
实线、点线、 虚线 、双线、槽线
border-radius :四个角为圆角边框
border-top-left-radius: 左上为圆角边框
可以在标签周围创建边框，边框是标签可见框的最外部。
可以使用border属性来设置盒子的边框：
border:1px blue solid;
4.外边距 margin
外边距是标签边框与周围标签相距的空间。
margin可以为负值。
margin的值可以为auto，外边距为最大值，左右外边距设置为auto，左右外边距设置相等.
垂直为auto时值为0，
水平居中 也可以写为margin:0 auto。
外边距不会影响盒子的整体大小，但是会影响盒子的位置，会影响盒子的实际控制范围。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.c1{
width: 100px;
height: 100px;
}
.c1{
padding: 20px 10px 10px 30px;
margin: 100px;
border:5px blue solid;
border-radius:10px;
}
.c2{
padding: 15px;
}
.text_some{
width: 500px;
height: 30px;
display: block;
font-size: 20px;
font-family: "arial black";
border: 1px blueviolet solid;
color: gray;
border-radius: 10px;
}
.text_some:hover{
border: 1px darkred solid;
}
</style>
</head>
<body>
<div class="c2">
abcd
</div>
<img src="img/4N9Q4EO$EB$9CNP%5BLQAL%258J.png" class="c1" />
<input type="text" class="text_some" />
</body>
</html>
10.练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>华为登录网页</title>
<style type="text/css">
*{ //消除页面格式
margin: 0px;
padding: 0px;
}
.a2{
width: 180px;
height: 50px;
padding: 0px 0px 0px 200px ; 内边距
}
.a1{
width: 100%;
height: 50px;
background-color:whitesmoke;
}
.a3{
margin: 100px 0px 30px 0px; 外边距
font-size: 32px;
font-weight: bold;
}
.a4{
margin: 0px 100px 0px 100px;
border: none;
display:block;
padding-right: 120px;
border-right: gainsboro 2px solid;
}
.a5{
font-size: 13px;
color: gray;
margin: 0px 0px 0px 70px;
}
.w1{
margin:0px 0px 0px 30px ;
width: 300px;
height: 40px;
font-size: 14px;
color: #808080;
background-color:lightgray;
border-radius: 10px;
border:0px solid;
}
.w1:hover{
border: 1px solid #0000FF;
}
.w4{
margin:0px 0px 0px 40px ;
text-decoration: none;
}
.w2{margin:0px 0px 0px 30px ;
width: 300px;
height: 40px;
font-size: 15px;
background-color:#CA141D;
color: white;
font-weight:bold;
border-radius: 10px;
text-align: center;
opacity: 0.5;
display: block;
border: none;
}
.w7{
margin:0px 0px 0px 625px ;
text-decoration: none;
}
.e1{
font-size: 15px;
text-decoration: none;
}
.e2{
height: 100px;
background-color: #D3D3D3;
}
.e3{
color: #808080;
}
</style>
</head>
<body >
<div class="a1">
<img class="a2" src="img/华为.png">
</div>
<div class="a3" align="center">
华为账号登录
</div>
<div class="a6" >
<table border="0" width="600px" height="400px" cellpadding="0px" cellspacing="0px"align="center">
<tr>
<td rowspan="2">
<div class="a4" >
<img src="img/二维码.png" width="200px" height="200px"><br>
</div>
</td>
<td >
<div>
<input type="text" class="w1" placeholder="手机号/邮箱地址/账号名" />
</div>
</td>
</tr>
<tr>
<td >
<input type="text" class="w1" placeholder="密码" /><br><br>
<a href="#" class="w4">短信验证登录</a>
</td>
</tr>
<tr >
<td>
<div class="a5">
<p>若您使用华为手机，请进入“设置”>“华为帐号”扫码登录。 </p>
</div>
</td>
<td colspan="2" >
<div>
<!-- <span class="w2">
登录
</span> -->
<input type="text" class="w2" placeholder="登录" />
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div >
<a href="#" class="w7">注册 | 忘记密码 | 遇到问题</a>
</div>
</td>
</tr>
</table>
</div>
<div align="center" class="e2">
<br><a href="#" class="e1">
华为账号用户协议 | 关于华为账号与隐私的声明 | 常见问题 | Cookies
</a><br><br>
<p class="e3">华为账号 版权所欲 c 2011-2021</p>
</div>
</body>
</html>
扫一扫
173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
