前端(二)CSS
目录
1.基本选择器 2.组合选择器 3.属性选择器 4.分组和嵌套 5.伪类型选择器 6.伪元素选择器 7.选择器的优先级
a.宽和高 b.字体属性 c.文字属性 d.背景属性 e.边框 f.display属性 g.CSS盒子模型 h.float i.clear
j.overflow溢出属性 k.position定位 l.z-index m.opacity
2.1CSS的格式
css的格式:选择器{属性列表}
p{
backgroup:green;
border : 1px solid black;
}
2.2CSS的引入方法
a.行内样式
<body>
<p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>
</body>
b.内部样式
<head>
<style>
p{
backgroup:red;
}
</style>
</head>
c.外部样式
1、链接式
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
2、导入式
<style>
@import url("css文件路径");
</style>
<head>
<link rel="stylesheet" href="index.css">
</head>
<head>
<style>
@import "index.css";
</style>
</head>
2.3CSS选择器的分类
1.基本选择器
a.元素选择器
div{
background: green;
}
b.ID选择器
<p id="c1">这个是id标签</p>
#c1 {
background-color: red;
}
c.类选择器
<p class="c1">这个是类标签</p>
<p class="c2">这个是类标签</p>
.c1,
.c2{
font-size: 14px;
}
子类标签
p.c1 {
color: red;
}
d.通用选择器
设置默认值
* {
color: white;
}
2.组合选择器
a.后代选择器
<div id="d1">
<p>我是嵌套在div中的P标签</p>
<span>我是嵌套在div中的span标签</span>
<div>
<p>我是嵌套在div中的div中的P标签</p>
<span>我是嵌套在div中的span标签</span>
</div>
</div>
/*后代选择器*/
#d1 p {
color: red;
}
b.儿子选择器
/*儿子选择器*/
/*选择所有父级是 <div> 元素的 <p> 元素*/
#d1>p {
color: green;
}
c.毗邻选择器
<p>000</p>
<div>111</div>
<p>222</p>
<p>333</p>
/*毗邻选择器*/
/*选择所有紧接着<div>元素之后的<p>元素*/
div+p {
color: yellow;
}
#222黄
d.弟弟选择器
<p>000</p>
<div>111</div>
<p>222</p>
<p>333</p>
/*弟弟选择器*/
/*div后面所有的兄弟p标签*/
div~p{
color: blue;
}
#222 333 蓝
3.属性选择器
/*用于选取带有指定属性的元素。*/
p[title] {
color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
color: green;
}
/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
color: red;
}
/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
color: yellow;
}
/*找到所有title属性中包含(字符串包含)hello的元素*/
[title*="hello"] {
color: red;
}
/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素:*/
[title~="hello"] {
color: green;
}
4.分组和嵌套
a.分组
多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式
div,
p {
color: red;
}
b.嵌套
多种选择器可以混合起来使用,比如:.c1类内部所有p标签设置字体颜色为红色
.c1 p {
color: red;
}
5.伪类型选择器
/* 未访问的链接 */
a:link {
color: #FF0000
}
/* 已访问的链接 */
a:visited {
color: #00FF00
}
/* 鼠标移动到链接上 变色*/
a:hover {
color: #FF00FF
}
/* 选定的链接 */
a:active {
color: #0000FF
}
/*input输入框获取焦点时样式*/
input:focus {
outline: none; #外边框无样式
background-color: #eee;
}
6.伪元素选择器
a.fist-letter
//首字母
p:first-letter {
font-size: 48px;
color: red;
}
b.before
/*在每个<p>元素之前插入内容*/
p:before {
content:"*";
color:red;
}
c.after
/*在每个<p>元素之后插入内容*/
p:after {
content:"[?]";
color:blue;
}
d.first-child,last-child,nth-child
/*选择属于其父元素的首个子元素的每个 <p> 元素,并为其设置样式*/
div p:first-child{
color: blue;
}
div p:last-child{
color: blue;
}
/*第二个段落*/
div p:nth-child(2){
color: blue;
}
7.选择器的优先级
内联样式(直接在标签里面写style) >> id选择器 >> 类选择器 >> 元素选择器
还可以通过添加 p{color:red}!important方式来强制让样式生效
2.4CSS属性相关
a.宽和高
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度,内联标签的宽度由内容来决定。
b.字体属性
1.文本字体
p{
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}
2.文字大小
p {
font-size: 14px;
}
3.字重(粗细)
p{
font-weight: 100;
}
normal 默认值,标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细,400等同于normal,而700等同于bold
inherit 继承父元素字体的粗细值
4.字体颜色
p{
color : rgb(255,0,0)
}
p{
color : #FF0000
}
p{
color : rgba(255,0,0,0.7)
}
第四个值为alpha, 指定了色彩的透明度/不透明度,它的范围为0.0到1.0之间
c.文字属性
1.文字对齐
p{
text-align:center
}
left 左边对齐 默认值
right 右对齐
center 居中对齐
justify 两端对齐
2.文字装饰
p{
text-decoration : none
}
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值。
去掉a标签默认的自划线:
a {
text-decoration: none;
}
3.首行缩进
将段落的第一行缩进 32像素
p {
text-indent: 32px;
}
4.字体行高
行高是字体大小的两倍
p{
line-height:2;
}
p{
line-height:2px;
}
d.背景属性
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x:背景图片只在水平方向上平铺
repeat-y:背景图片只在垂直方向上平铺
no-repeat:背景图片不平铺
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: right top;
/*background-position: center top;*/顶部居中
/*简写*/
background:#ffffff url('1.png') no-repeat right top;
鼠标滚动背景不动:background-attachment: fixed;//固定位置
<head>
<meta charset="UTF-8">
<title>滚动背景图示例</title>
<style>
* {
margin: 0;
}
.box {
width: 100%;
height: 500px;
background: url("lp.jpg") no-repeat center center;
background-attachment: fixed;//固定位置
}
.d1 {
height: 500px;
background-color: tomato;
}
.d2 {
height: 500px;
background-color: steelblue;
}
.d3 {
height: 500px;
background-color: mediumorchid;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="box"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
e.边框
边框属性:
p{
border-width: 2px;
border-style: solid;
border-color: red;
}
简写:
p {
border: 2px solid red;
}
none 无边框。
dotted 点状虚线边框。
dashed 矩形虚线边框。
solid 实线边框。
单独设置边框:
p{
border-top-style:dotted;
border-top-color: red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
}
border-radius:将border-radius设置为长或高的一半即可得到一个圆形
p{
border-radius: 50%;
}
f.display属性
li {
display: inline;
}
display:"none" HTML文档中元素存在,但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block" 默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分。
不影响页面布局:visiblity:hidden;height:0;
display:"inline" 按行内元素显示,此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block" 使元素同时具有行内元素和块级元素的特点。
visibility:"none" 隐藏但是占位
g.CSS盒子模型
标准文档流盒子水平居中: margin: 0 auto;
让浮动盒子水平居中:给浮动盒子加一个父盒子,设置宽度根浮动盒子大小一样,并且ocerflow:hidden;
设置该盒子margin: 0 auto;
.box {
width: 400px;
height: 300px;
background-color: red;
}
.main {
width: 100px;
overflow: hidden;
margin: 0 auto;
}
.child {
width: 100px;
height: 100px;
background-color: green;
margin: 0 auto;
float: left;
}
<div class="box">
<div class="main">
<div class="child"></div>
</div>
</div>
margin外边距
.margin-test {
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;
}
简写:顺序:上右下左
.margin-test {
margin: 5px 10px 15px 20px;
}
居中
.mycenter {
margin: 0 auto;
}
注意:margin垂直方向塌陷问题,上30px,下40px,上下距离40px,大吃小
padding内填充
.padding-test {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}
简写
.padding-test {
padding: 5px 10px 15px 20px;
}
提供一个,用于四边;
提供两个,第一个用于上-下,第二个用于左-右;
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下;
提供四个参数值,将按上-右-下-左的顺序作用于四边;
继承性:color,text-xxx,font-xxx,line-xxx可以被继承;盒子模型(宽高)不能继承性。
a标签有特殊情况,设置a标签的字体颜色一定要选中a,不要使用继承。
h.float
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
i.clear
clear属性规定元素的哪一侧不允许其他浮动元素
注意:clear属性只会对自身起作用,而不会影响其他元素。
清除浮动的副作用(父标签塌陷问题):
1.固定高度
2.伪元素清除法
3.overflow:hidden
.clearfix:after {
content: ".";
clear: both;
display: block;
visibility: hidden; //隐藏点.
height: 0;
}
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。
j.overflow溢出属性
p {
overflow : visible;
}//文本超出会溢出
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。BFC
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
overflow(水平和垂直均设置)
overflow-x(设置水平方向)
overflow-y(设置垂直方向)
圆形头像
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>overflow示例</title>
<style>
.c1 {
width: 120px;
height: 120px;
border: 1px solid black;
overflow: auto; #下拉菜单
}
.header-img {
width: 120px;
height: 120px;
border: 2px solid red;
border-radius: 100%;
overflow: hidden; #隐藏
}
img {
max-width: 100%;
}
</style>
</head>
<body>
<div class="c1">
从前有座山,山上有座庙,庙里有个老和尚,老和尚在跟小和尚说: 从前有座山,山上有座庙,庙里有个老和尚,老和尚在跟小和尚说: 从前有座山,山上有座庙,庙里有个老和尚,老和尚在跟小和尚说:
</div>
<div class="header-img">
<img src="lp.jpg" alt="">
</div>
</body>
</html>
k.position定位
http://www.w3school.com.cn/css/css_positioning.asp
relative:相对位置,参考点相对于原来位置;不脱离标准文档流,形影分离;层级提高,做压盖;布局方案:“子绝父相”。
absolute:绝对定位,参考点:单个盒子(top)页面的左上角,(bottom)浏览器的左下角;脱离标准文档流,不占位置;
fixed:固定定位,参考点浏览器左上角;脱标;作用:固定导航栏,返回顶端;
父子盒子: 如果父辈盒子设置相对定位。子盒子设置绝对定位,以父盒子的0,0为参考点。
示例:
让绝对定位的盒子居中:
.father{
width: 100%;
height: 400px;
background-color: red;
}
.child{
width:400px;
height: 100px;
background-color: green;
position: absolute;
left: 50px;
margin-left: -200px;
}
<div class="father">
<div class="child"></div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>返回顶部示例</title>
<style>
* {
margin: 0;
}
.d1 {
height: 1000px;
background-color: #eeee;
}
.scrollTop {
background-color: darkgrey;
padding: 10px;
text-align: center;
position: fixed;
right: 10px;
bottom: 20px;
}
</style>
</head>
<body>
<div class="d1">111</div>
<div class="scrollTop">返回顶部</div>
</body>
</html>
l.z-index
属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
http://www.w3school.com.cn/cssref/pr_pos_z-index.asp
m.opacity
用来定义透明效果。取值范围是0~1,0是完全透明,1是完全不透明。
img
{
opacity:0.4;
}