层叠样式表(CSS)是一种用来表现HTML或XML等文件样式的计算机语言
可以静态地修饰网页,配合各种脚本语言动态地对网页各元素进行格式化
能够对网页中元素位置的排版进行像素级精确控制
CSS引入方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css引入方式</title>
<!--方式一 引入外部css文件,实现标签内容与标签样式的解耦 -->
<link href="f.css" rel="stylesheet"/>
<!-- 方式二:直接在当前页面的style标签中定义标签样式-->
<style type="text/css">
p{/*设置所有p标签字体颜色为红色*/
color: green;
}
</style>
</head>
<body>
<p>天空/大海/草原</p>
<p >天空/大海/草原</p>
<p >天空/大海/草原</p>
<p>天空/大海/草原</p>
<p >天空/大海</p>
<!-- <p style="color: red">天空/大海</p> 方式三-->
</body>
</html>
<!--
f.css:
p{ 标签选择器,设置所有p标签字体颜色为红色
color: red;
}
-->
三种引入方式有一定优先级,方式三优先级最高
HTML从上往下加载
CSS选择器
选择器:利用不同的选择方式来选中当前标签,为其设置样式
常用的标签(元素)选择器,类选择器,id选择器
<!--标签(元素)选择器,为所有标签的内容设置字体为14px,颜色为黑色
格式:
标签名{
样式值1;
样式值2;
}
-->
<head>
<meta charset="UTF-8">
<title>css引入方式</title>
<style type="text/css">
p{
color: black;
font-size: 14px;
}
</style>
</head>
<body>
<p >天空/大海/草原</p>
<p >天空/大海/草原</p>
<p >天空/大海/草原</p>
<p>天空/大海/草原</p>
<p >天空/大海</p>
</body>
<!--类选择器,为一部分标签的内容设置字体为14px,颜色为黑色
格式:
.class属性值{
样式值1;
样式值2;
}
-->
<head>
<meta charset="UTF-8">
<title>css引入方式</title>
<style type="text/css">
.ps{
color: black;
font-size: 14px;
}
/* 设置class属性为ps的p标签样式*/
</style>
</head>
<body>
<p class="ps">天空/大海/草原</p>
<p class="ps">天空/大海/草原</p>
<p class="ps">天空/大海/草原</p>
<p>天空/大海/草原</p>
<p >天空/大海</p>
</body>
<!--id选择器,为单独一个标签的内容设置字体为14px,颜色为黑色
格式:
#id属性值{
样式值1;
样式值2;
}
-->
<head>
<meta charset="UTF-8">
<title>css引入方式</title>
<style type="text/css">
#id{
color: red;
font-size: 14px;
}
/* 设置class属性为ps的p标签样式*/
</style>
</head>
<body>
<p class="ps">天空/大海/草原</p>
<p id="ids">天空/大海/草原</p>
<p class="ps">天空/大海/草原</p>
<p>天空/大海/草原</p>
<p >天空/大海</p>
</body>
以上选择器可以同时对一个标签使用,但是有优先级
style属性设置的优先级最高
id选择器优先级其次
类选择器优先级再次
标签选择器优先级最低
其它选择器
*{
/* 通用选择器,设置整个页面统一的字体样式 */
font-size:14px
}
#ids p{/* 后代选择器 ——子标签
选择器1 选择器2{
样式;
}
*/
/* 设置id值为ids的标签下子标签中所有的p标签样式 */
font-size:14px
}
#ids>p{/* 儿子选择器——子标签 */
/* 设置id值为ids的标签下子标签中第一个p标签样式 */
font-size:14px
}
#ids+p{/* 相邻选择器 ——同级标签上一个或下一个*/
/* 设置id值为ids的标签上/下同级的相邻的p标签样式 */
font-size:14px
}
#ids~p{/* 弟弟选择器 ——同级标签下面*/
/* 设置id值为ids的标签下面同级的所有p标签样式 */
font-size:14px
}
div,p{/* 多个选择器样式一致时,用逗号隔开 */
color: blue;
}
/*
<p a="b">天空/大海/草原</p>
自定义一个属性a="b"
*/
[a="b"]{/*自定义属性选择器
[属性名]或者[属性名=属性值]{
样式;
}
*/
color: blue;
}
伪类选择器
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
a:link {/*超链接未点击的连接显示绿色 */
color: green;
}
a:visited {/*超链接已点击且成功访问的连接显示灰色 */
color: gray;
}
a:hover {/*鼠标移动到连接上触发 */
color: red;
}
input:focus {/*文本框获取焦点后样式 */
color: blue;
background-color: gray;
}
</style>
</head>
<body>
<a href="http://baidu.com">百度</a>
<a href="http://souhu.com">搜狐</a>
<input type="text"/>
</body>
伪元素选择器
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<style type="text/css">
#p1:before {/*在这个标签之前添加什么文本内容 */
content: "*";
color: red;
}
#p2:after {/*在这个标签之后添加什么文本内容 */
content: "用户名不能为空";
color: red;
}
body {
font-family: ".PingFang sc",微软雅黑,"Microsoft YaHei"; /* 设置多个字体,操作系统不同有的字体可能不存在,所以要设置多个 */
font-size: 18px; /* 字体大小 */
text-align: left;/* 字体居中方式 */
}
a{
text-decoration: none;/* 取消 超链接下划线 */
}
</style>
</head>
<body>
<p id="p1"></p>
<input type="text" name="username"/>
<p id="p2"></p>
<br/><br/>
<span><span style="color: red">*</span>号项为必填内容</span>
</body>
css文本属性
.fonts{/*类选择器,设置class属性值为fonts的标签的字体样式*/
/*常用字体属性*/
font-family: ".PingFang sc",微软雅黑;/*字体模板*/
font-size: 24px;/*字体大小*/
font-weight: 24px;/*字体宽度*/
overflow: scroll;/*内容溢出设置*/
/*scroll——溢出的话添加横竖滚轮条滚动查看内容
auto—— 溢出的话添加竖滚轮条滚动查看内容
visible——默认选项,内容会出现在标签框外
hidden——溢出标签框的内容不可见
*/
text-align: center;/*内容居中*/
text-decoration: none;
/*none 默认的文本,可以取消超链接的下划线
underline 定义文本下的一条线
overline 定义文本上的一条线
line-through 定义穿过文本下的一条线
blink 定义闪烁的文本。
*/
}
css背景属性
.background{
/* 没有高度/宽度设置会无法显示 */
width: 1200px;
height: 1200px;
border: 1px solid black;
/* 边框大小1px 实线 黑色 */
background-attachment: fixed;
/* 固定当前图片在页面的显示,不随页面滚动 */
background-color: red; /*背景颜色*/
background-image: url("2.jpg");
/*设置背景图片,通常与下列属性并用,不重复平铺页面*/
background-repeat: no-repeat;/* 不重复平铺图片,只显示一张 */
background-position: center;/* 居中 */
background-position: 50% 50%;/*背景位置 */
background: url("2.jpg") no-repeat 50% 50%;
/*简写多个样式 */
}
css边框属性
无内容的div标签如果没有高和宽的设置,就无法显示
<div class=“c1”></div>
.c1{
height: 120px;/*边框的高*/
width: 80px;/*边框的宽*/
background-color: red;/*边框的背景色*/
border-width: 2px; /* 边框线条的宽度 */
border-style: solid;/* 边框线条的样式 none——无边框 solid—— 实线 dashed——虚线 dotted——点线 */
border-top-color: black;/* 边框顶部线条的颜色 */
border-bottom-color: green;/* 边框底部线条的颜色 */
/* border-right-color边框右侧线条的颜色
border-left-color边框右侧线条的颜色*/
border-radius: 100%; /*设置圆角边框 设置为长或高的一半即可得到一个圆形 */
/* 简写版本: */
border: 2px solid red; /*线条宽度,实线,红色*/
border-right: 2px solid blue;/* 设置右边框的样式 */
}
示例:
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.fimg {
width: 100px;
height: 80px;
border: 2px solid red;
border-radius: 100%;
/*父级边框以圆形展示 */
overflow: hidden;
/*父级边框以圆形展示时,图片溢出了部分时,改为溢出部分不可见 */
}
img {
max-width: 100%;/*不允许图片超出父级标签总宽度*/
/*当图片的大小超过父级的div框大小时可以设置最大宽度为父级边框的100% */
}
</style>
</head>
<body>
<div class="fimg">
<img src="2.jpg" alt="图片未找到">
</div>
</body>
display属性
display:"none" 在浏览器中不显示该标签。
一般用于配合JavaScript代码使用。
display:"block" 按块级元素显示,默认占满整个页面宽度
display:"inline"按行内元素显示,行内元素不能设置宽和高
默认以标签内容的宽和高为准
display:"inline-block" 使元素同时具有行内元素和块级元素的特点。
<style type="text/css">
.s{/*将列表元素放在一行展示*/
display: inline;
}
</style>
</head>
<body>
<ul >
<li class='s'>首页</li>
<li class='s'>游戏</li>
<li class='s'>漫画</li>
<li class='s'>音乐</li>
</ul>
</body>
盒子模型
margin:外边距 元素边框与元素边框之间的距离
padding:内边距 内容与边框之间的距离
Border(边框): 边框。
Content(内容): 边框内容
*{
margin:0;
/*不同的浏览器有不同的默认外边距设置 ,此处统一取消默认设置 */
padding:0;
}
.d1{
margin:0 auto
/*标签框内容居中
第一个表示top(上边框)和bottom(下边框),
第二个表示left和right
0 auto
上下边界为0,左右则根据宽度自适应相同值(即居中)
*/
}
浮动属性
float浮动属性,
值为left(向左浮动),right(向右浮动),none(默认不浮动),
inherit(从父元素继承 float 属性)
css中任何元素都是可以浮动的
浮动元素会生成一个块级框,无论它本身是什么元素
浮动就是块级框不再单独占据一行,
能浮动的元素尽量放在一行,具体看页面总宽度与浮动元素宽度之和的比较
不能放在一行的就放在下一行
浮动的块级框会覆盖不浮动的元素框
清除浮动:clear属性 left(清除左侧浮动)
right(清除右侧浮动)
both(清除左右浮动)
none(默认不清除)
在浮动标签的后一个标签中添加clear属性
例如clear:left 清除左侧浮动——如果左侧有浮动标签就换到下一行
这样左侧就没有浮动
所谓的清除浮动只是影响当前标签框的位置,
不是清除浮动元素的浮动样式
不会影响其它标签
<!--
d1是浮动框,面积小的黑色图 ,
d2是非浮动框,面积大的红色
浮动的d1会覆盖非浮动框d2的一部分
-->
<style type="text/css">
*{/* 取消浏览器默认边距设置 */
margin: 0;
padding: 0;
}
.d1{
height: 100px;
width: 80px;
float:left;
background-color: black;
}
.d2{
height: 120px;
width: 120px;
background-color: red;
}
.d2{/*清除左侧浮动*/
clear: both;
}
</style>
</head>
<body>
<div class="">
<div class="d1"></div>
<div class="d2"></div>
</div>
</body>
浮动框导致父级框无法显示
<!--
如果一个标签框内部全是浮动框,那么当前标签框的样式就无法显示
默认高度为0
子标签的浮动框的样式无法撑起当前标签的高度
解决方式一:
在子标签最后添加一个非浮动标签用于支撑父级框的高度
.d2{/*清除左侧浮动,所以当前标签换行,高度为0,
页面表现方式就是父级边框的下边框的线条*/
clear: both;
}
解决方式二:
不需要添加一个额外的子标签
.当前标签class属性值:after{ 在当前标签内部最后添加一个样式
content : "";
clear:both; 清除左右浮动
display: block;默认占满页面宽度
/*多数标签都会用到清除浮动,可以抽取出来*/
}
-->
<style type="text/css">
*{/* 取消浏览器默认边距设置 */
margin: 0;
padding: 0;
}
.d1{/*浮动框*/
height: 100px;
width: 80px;
float:left;
background-color: black;
}
.fa{/*父级框*/
background-color: gray;
}
/* .fa:after {
content: "";
clear: both;
display: block;
} */
</style>
</head>
<body>
<div class="fa">
<div class="d1"></div>
</div>
</body>
简单导航栏示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页1</title>
<style type="text/css">
.d1{/*背景颜色为灰色*/
background-color: gray;
}
.d1:after{
/*导航栏全是浮动框,需要以下代码来撑起导航栏的高度*/
content : "";
clear:both; /*清除左右浮动,即换行*/
display: block;/*以块级框的形式显示,独占一行*/
}
li{/*列表元素在一行显示,字体为白色*/
display: inline;
color: white;
}
.l1,.l2{/*左右侧标题栏共同样式*/
height: 50px;
width: 80px;
text-align:center;/*文字居中*/
padding-right:10px;/*内填充间距*/
padding-left:10px;
padding-top:10px;
}
.l1{
float: left;/*左浮动*/
}
.l2{
float: right;/*右浮动*/
}
.l1:hover {/*鼠标移动到超链接上触发 */
color: red;
}
.l2:hover {/*鼠标移动到超链接上触发 */
color: blue;
}
a{/* 去掉超链接的下划线 */
text-decoration: none;
}
</style>
</head>
<body>
<div class="d1">
<ul class="u1">
<a href="#"><li style="font-size: 20px " class="l1">首页</li></a>
<a href="#"><li class="l1">手机数码</li></a>
<a href="#"><li class="l1">家用电器</li></a>
<a href="#"><li class="l1">箱包</li></a>
<a href="#"><li class="l1">孕婴产品</li></a>
<a href="#"><li class="l1">水果</li></a>
<a href="#"><li class="l1">食品</li></a>
</ul
<ul class="u2">
<a href="#"><li class="l2">登录</li></a>
<a href="#"><li class="l2">注册</li></a>
<a href="#"><li class="l2">购物车</li></a>
</ul>
</div>
</body>
</html>