CSS（Cascade Style Sheets）层叠样式表
是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
1.使用css的方式:
1 内联样式
直接将样式定义在元素上
元素的style属性
<元素名称 style="属性:'属性值';属性:'属性值';">
2 内部样式表
通过head中的style元素引入css
<style>
选择器{
属性:属性值;
属性:属性值;
}
</style>
3 外联样式表
通过head中的link的href属性 引入外部的css文件
.css结尾的文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--通过head中的link的href属性 引入外部的css文件-->
<link rel="stylesheet" href="css/001.css" />
<style type="text/css">
#div01{
width: 100px;
height: 100px;
border: 1px solid darkgray;
}
</style>
</head>
<body>
<!--宽:100px 高 100px 背景颜色 为 lightpink-->
<h2>内联样式</h2>
<div style="width: 100px; height: 100px; background-color: lightpink;">CSS是最好的文本语言</div>
<hr />
<h2>内部样式表</h2>
<div id="div01">我是移动四级包</div>
<hr />
<h2>外联样式表</h2>
<div id="div02"></div>
</body>
</html>1 通用选择器
* 当前页面的所有元素
2 id选择器
#元素的id属性值
注意: id值要唯一
不能用数字开头
大小写敏感
3 类选择器
.class属性值
4 元素选择器
元素名称 当前页面的对应元素会被选中
5 分组选择器 使用逗号 , 分隔
选择器1,选择器2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 通用选择器 : * */
*{
background-color: pink;
}
/*id 选择器 */
#div01{
border:1px dotted palevioletred;
}
/*类选择器*/
.zise{
/*将字体颜色设置为紫色*/
color: plum;
}
/*元素选择器*/
pre{
border: 1px solid darkorchid;
}
/* 分组选择器 此处选中 div和pre */
/*
* id选择器,元素选择器
* #div01,pre{*/
div,pre{
/*设置的背景颜色*/
background-color: hotpink;
}
</style>
</head>
<body>
<div id="div01">三级头</div>
<span class="zise">三级包</span>
<span class="zise">三级甲</span>
<pre>
我是一名吃鸡爱好者,我希望你能加入我的战队,让我们一起攻占P城,称霸机场
</pre>
</body>
</html>通过元素属性来选取元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 属性选择器 [属性名称] 选中页面中带有该属性的元素*/
[for]{
color: darkred;
}
/*[属性名称=属性值] 选取带有某个属性值得元素 */
[type=password]{
background-color: palevioletred;
}
/*[属性名称~=属性值] 选取带有某个单词的属性值得元素*/
[class~=green]{
background-color: palevioletred;
}
</style>
</head>
<body>
<form action="">
<table>
<tr>
<td><label for="uname" class="green">用户名</label></td>
<td>
<input type="text" id="uname" name="uname" />
</td>
</tr>
<tr>
<td><label for="pwd" class="dark green">密码</label></td>
<td>
<input type="password" id="pwd" name="pwd" />
</td>
</tr>
<tr>
<td><button>登录</button></td>
</tr>
</table>
</form>
</body>
</html>
1 后代选择器
该元素的所有后代(子子孙孙)
使用空格分割
2 子元素选择器
该元素的直接子代(所有的儿子)
使用 > 分割
3 普通兄弟
该元素后面的所有同辈元素(所有的弟弟妹妹)
使用 ~ 分割
4 相邻兄弟
该元素下一个同辈元素
使用 + 分割
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 200px;
background-color: lavenderblush;
}
</style>
<style>
/*后代选择器
class为father的元素的后代元素中的span元素
* */
.father span{
background-color: plum;
}
/*子元素选择器
* class为father的元素的直接子元素中的span元素
*/
.father>span{
background-color: red;
}
/* 普通兄弟
class为son的元素后边的同辈元素中的div元素
* */
.son~div{
color: green;
}
/*相邻兄弟
class为son的元素下一个同辈元素中的div元素*/
.son+div{
color: gray;
}
</style>
</head>
<body>
<div class="father">
<span>P城我来了</span>
<div>
三加二
</div>
<div class="son">
八倍镜
<img src="img/001.jpg" alt="" />
</div>
<div >
轰炸区
<span>崩崩崩</span>
</div >
<div>
空投
<p>一起追梦吧</p>
</div>
<p>啊啊啊,我死了</p>
</div>
</body>
</html>CSS的文本属性
背景:
background-color
background-image:url(图片的地址)
background-repeat:
repeat:默认值
repeat-x: 横向平铺
repeat-y:纵向平铺
no-repeat: 不重复
文本:
color:文本的颜色
text-align: 文本的对齐方式
left center right
text-decoration: 修饰文本的样式
1）underline：-------<u></u>
对文本添加下划线，与HTML的u元素相同。
2）overline：
对文本添加上划线。
3）line-through：--------------<del></del>
对文本添加中划线，与HTML中的s和 strike 元素相同。
4）none：
关闭原本应用到元素上的所有装饰。
text-indent
可以设置文本首行缩进。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#txt{
/*文本颜色 color*/
color:greenyellow;
/*文本的对齐方式*/
text-align: right;
}
/*元素选择器 */
div{
/*百分比表示宽高时 是相对于父级而言的 */
width: 30%;
height: 200px;
border:1px salmon groove;
}
/*相邻兄弟 : <h3>下划线</h3>*/
hr+h3{
/*文本样式修饰*/
text-decoration: underline;
}
#ol{
/*文本样式修饰*/
text-decoration: overline;
}
.del{
text-decoration: line-through;
}
p{
/*文本首行缩进 单位是em 一个字的宽度*/
text-indent: 2em;
}
</style>
</head>
<body>
<!--就近原则 -->
<div id="txt" style="color: rgb(225,0,0)">
可乐
<div >
止痛药
</div>
</div>
<hr />
<h3>下划线</h3>
<h3 id="ol">上划线</h3>
<h3 class="del">删除线</h3>
<h3 class="del" style="text-decoration: none;">清除样式</h3>
<hr />
<p>
P城霸主,郑某某,娇俏可人,人美声甜,带你吃鸡无悬念.
</p>
</body>
</html>1 font-family : 字体样式
2 font-size: 单位 :px
属性-size设置字体大小。
3 font-style
字体风格，该属性最常用于规定斜体文本。
1）normal：文本正常显示；
2）italic：文本斜体显示；
3）oblique：文本倾斜显示，oblique是将文字强制倾斜。
4 font-weight
字体加粗，该属性设置文本的粗细。
100~900的整百数字 400 是正常大小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
p{
font-family: "arial black";
}
#lh{
font-size: 200px;
}
p>span{
/*规定斜体文本*/
font-style: italic;
/*无法清除斜体*/
text-decoration: none;
}
</style>
</head>
<body>
<p>
<span id="lh">LUHAN</span>
<font size="7">GXT</font>
吃鸡是一款游戏，游戏全称叫做绝地求生(PLAYERUNKNOWN’S BATTLEGROUNDS),
游戏中每一局都会100名玩家加入，也就是说每一局开场都是以100个人开始的，
大家一开始都是手无寸铁的从飞机上跳下去，最后游戏只能有一个人或者是一个小队胜出,
在游戏中，玩家需要自己去拾取装备来武装自己，然后努力的活下去，
</p>
<hr />
<h3>字体加粗</h3>
<div style="font-weight: 100;">100</div>
<div style="font-weight: 200;">200</div>
<div style="font-weight: 300;">300</div>
<div style="font-weight: 400;">400</div>
<div style="font-weight: 500;">500</div>
<div style="font-weight: 600;">600</div>
<div style="font-weight: 700;">700</div>
<div style="font-weight: 800;">800</div>
<div style="font-weight: 900;">900</div>
<div style="font-weight: 1000;">1000</div>
</body>
</html>
list-style-type：列表项目标记样式。
list-style-position：列表项目标记位置
inside 将列表项向右缩进
outside 默认
list-style-image：把图像设置为列表中的项目标记
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul{
/*清除列表样式 list-style-type: none */
list-style-type: disc;
}
[style]+ul{
/*把图像设置为列表中的项目标记*/
list-style-image: url(img/code.bmp);
}
ol{
/*复合属性 同时设置*/
list-style: disc inside url(img/button.bmp);
border:1px solid palegreen;
}
</style>
</head>
<body>
<!--将列表项向右缩进-->
<ul style="list-style-position: inside;">美女
<li>范冰冰</li>
<li>迪丽热巴</li>
<li>刘亦菲</li>
</ul>
<ul>男神
<li>陈伟霆</li>
<li>胡歌</li>
<li>彭于晏</li>
</ul>
<ul style="list-style-position: outside;">老实人
<li>王宝强</li>
<li>陈羽凡</li>
<li>贾乃亮</li>
</ul>
<ol>最爱的水果
<li>榴莲</li>
<li>芒果</li>
<li>香蕉</li>
</ol>
</body>
</html>border 边框
border-width 边框的宽度
px
border-style 边框的样式
none（无）、dotted（点状）、dashed（虚线）、solid（实线）
border-color 边框的颜色
3种
表格:
border-collapse: 双线变单线
separate : 双线
collapse : 单线
border-spacing :
单元格间距 在border-collapse的值为separate的情况下才有效
<!DOCTYPE html>
<html style="padding: 10px;">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: brown;
}
#div01{
/*复合属性 边框宽度 样式 边框颜色*/
border: 5px solid rosybrown;
}
div+div{
/*边框宽度*/
border-width: 5px;
/*边框样式*/
border-style: solid;
/*边框颜色 */
border-color: rosybrown;
}
table{
border-collapse: separate;
/*与表格的属性 cellspacing的效果一致*/
border-spacing: 10px;
}
p{
/*下*/
border-bottom: 5px rosybrown solid;
/*左*/
border-left: 5px rosybrown solid;
}
</style>
</head>
<body style="padding: 10px;">
<div id="div01"></div>
<div></div>
<hr />
<h3>双线变单线</h3>
<table border="1px" cellspacing="10px">
<tr>
<td></td>
<td>周一</td>
<td>周二</td>
<td>周三</td>
</tr>
<tr>
<td>课程</td>
<td>HTML</td>
<td>JAVA</td>
<td>CSS</td>
</tr>
</table>
<hr />
<p>设置边框的上下左右</p>
</body>
</html>margin : 外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
border: 1px lightblue solid;
/*外边距: margin 上下左右 都是20px*/
/*margin: 20px;*/
/*margin-bottom: 20px;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;*/
/*
* margin: 上下 35px 左右 60px;
*/
/*margin: 35px 60px;*/
/* 顺时针: 上右下左 */
/*margin:10px 20px 30px 40px;*/
margin: 225px auto;
/*内边距 padding
会使元素变形
* */
/*padding: 20px 30px 40px 50px;*/
}
</style>
</head>
<body style="margin: 0px;">
<div style="width: 600px; height: 300px;">
<span>在游戏中，玩家需要自己去拾取装备来武装自己，然后努力的活下去，随着时间的增长，
可活动范围会越来越小，所以每一个人最后都会持枪相对了，谁强谁就能继续活下去</span>
</div>
<p>
将敌方打倒后，可以拾取敌方捡过的东西（可以翻他包），但是一不小心，螳螂捕蝉黄雀在后，也很容易成为别人的目标
</p>
</body>
</html>
水平方向:
text-align:
left
right
center
justify: 两端对齐
垂直方向:
vertical-align:
top 顶部 同行中的最高元素
bottom 底部
middle 垂直居中
text-top: 同行中的文本最高处对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style>
div{
/*div 所有内容水平居中*/
text-align: center;
}
#txt{
/*vertical-align: 垂直对齐*/
vertical-align: middle;/*同行中的最高元素*/
}
#span01{
/*字体大小 */
font-size: 60px;
}
</style>
<div>
<img src="img/001.jpg" alt="" />
<span id="span01">
iphone8
</span>
<span id="txt">
iphone7
</span>
</div>
</body>
</html>好玩的video
属性:
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted muted 规定视频的音频输出应该被静音。
poster UR 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性.
src url 要播放的视频的 URL。width pixels 设置视频播放器的宽度。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<video width="800px" controls poster="img/背景.png"
preload>
<source src="http://vjs.zencdn.net/v/oceans.mp4"></source>
请更换浏览器(IE浏览器不行)
</video>
</body>
</html>display : 定义元素的显示方式
属性值:
block 块级元素 前后换行 可以设置宽高
inline-block 行内块 不会换行 可以设置宽高
inline 行内元素 不可以设置宽高
none 此元素不显示
块:
div p pre h1~h6 table form
1 前后换行 独占一行 可以设置宽高
2 块级元素具有盒子模型
行内(内联):
span input font br hr img(可以设置宽高)
1 从左到右 排列 除非一行不够放 否则不会换行
2 不可以设置宽高
3 不能使用盒子模型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
/*将div显示为行内块*/
display: inline-block;
width: 88px;
height: 88px;
border: 1px dotted palevioletred;
}
span{
/*将span显示为块级元素*/
display: block;
/*可以设置宽高*/
width: 88px;
height: 88px;
/*可以使用border*/
border: 1px dotted palevioletred;
}
</style>
</head>
<body>
<div>P城</div>
<div>Y城</div>
<div>M城</div>
<span>机场</span>
<span>监狱</span>
<span>防空洞</span>
</body>
</html>
float:浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
/*float 浮动*/
float: right;
width: 100px;
height: 100px;
background-color: greenyellow;
border: 1px solid green;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
