Cascading Style Sheets层叠级联样式表
格式
选择器{
声明1;
声明2;
声明3;
}
外部引用
<head>
<link rel="stylesheet" href="../css/style.css">
</head>
选择器
基本选择器
标签选择器
<head>
<style>
h1{
color: blue;
}
</style>
</head>
<body>
<h1>标签选择器</h1>
</body>
class选择器
<head>
<style>
.a{
color: blue;
}
.b{
color: red;
}
</style>
</head>
<body>
<h1 class="a">类选择器</h1>
<h1 class="b">类选择器</h1>
<h1>类选择器</h1>
</body>
id选择器
<head>
<style>
#a{
color: blue;
}
#b{
color: red;
}
</style>
</head>
<body>
<h1 id="a">类选择器</h1>
<h1 id="b">类选择器</h1>
<h1>类选择器</h1>
</body>
标签可以有相同的class，但id唯一，这是class选择器与id选择器的区别。
同一个标签，id选择器样式>class选择器>标签选择器。
层次选择器
后代选择器
在某个元素的后面的某元素
<head>
<style>
//ul标签后面的所有p标签样式
ul p {
color: red;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<ul>
<li>
<p>p3</p>
</li>
<li>
<p>p4</p>
</li>
</ul>
</body>
子选择器
某元素的后一代
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
//body标签下一代中的p标签
body>p {
color: red;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<ul>
<li>
<p>p3</p>
</li>
<li>
<p>p4</p>
</li>
</ul>
</body>
相邻选择器
同一层次的元素的下一个元素
<head>
<style>
//和p2同层次，且是p2下一个的p标签
.active + p {
color: red;
}
</style>
</head>
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
</body>
通用选择器
同一层次的元素后面的所有元素
<head>
<style>
//和p2同层次，且在p2后面所有的p标签
.active ~ p {
color: red;
}
</style>
</head>
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
</ul>
<p>p6</p>
</body>
全部都在对应元素向下选择，但不包括该元素
结构伪类选择器
格式
标签:具体位置{
声明
}
第一个子类和最后一个子类
<head>
<style>
//ul标签后代的第一个li标签
ul li:first-child{
color: red;
}
//ul标签后代的最后一个li标签
ul li:last-child{
color: green;
}
<!--如果有多个ul,每个ul的第一个和最后一个元素都会被选中-->
</style>
</head>
<body>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
定位到父元素选择第一个元素
<head>
<style>
//选中p元素的父亲的第一个孩子，这个孩子元素必须是p元素
p:nth-child(1) {
color: red;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
</body>
定位到父元素选择类型为该元素的第一个元素
<head>
<style>
//选择p元素的父亲元素后代中第一个类型为p的元素
p:nth-of-type(1) {
color: red;
}
</style>
</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
</body>
p:nth-child(1)按顺序选择，如果p元素的父亲元素后代第一个元素不是p元素，样式将无效。
p:nth-of-type(1)按类型选择，会定位到p元素的父亲元素后代第一个类型为p的元素。
属性选择器
格式
标签[标签属性(=值)]{
声明
}
例1：选中a标签中有id属性的元素
<head>
<style>
a[id] {
color: red;
}
</style>
</head>
<body>
<a href="" id="">1</a>
<a href="">1</a>
</body>
例2：选中a标签中id属性为first的元素
<head>
<style>
a[id=first] {
color: red;
}
</style>
</head>
<body>
<a href="" id="first">1</a>
<a href="" id="last">1</a>
</body>
例3：选中a标签中class属性为links item的元素
<head>
<style>
a[class="links item"] {
color: red;
}
</style>
</head>
<body>
<a href="" class="links item">1</a>
<a href="" class="links" >1</a>
</body>
因为id是唯一的，所以id带值可以没有"",但class需要有引号，参考例2，例3。
例4：选中a标签中class属性含有links的元素
<head>
<style>
a[class*="links"] {
color: red;
}
</style>
</head>
<body>
<a href="" class="links item">1</a>
<a href="" class="item">1</a>
</body>
=表示属性内的值绝对等于引号内的值，*=表示属性内的值含有引号内的值，参考例3，例4
例5：选中a标签中href属性以http开头的元素（利用正则表达式）
<head>
<style>
a[href^=http] {
color: red;
}
</style>
</head>
<body>
<a href="https:www.baidu.com">1</a>
<a href="../resource/image/1.jpg">1</a>
</body>
例6：选中a标签中href属性以com结尾的元素（利用正则表达式）
<head>
<style>
a[href$=com] {
color: red;
}
</style>
</head>
<body>
<a href="https:www.baidu.com">1</a>
<a href="../resource/image/1.jpg">1</a>
</body>
美化页面元素
span
将字体重点突出（感觉和div差不多，但div包含内容更多）
<head>
<style>
#a{
font-size: 50px;
}
</style>
</head>
<body>
Hello <span id="a">World！</span>
</body>
字体样式
font-style: oblique; //字体风格，斜体
font-weight: bold; //字体粗细（宽度），粗
line-height: 20px; //字体行高
font-size: 40px; //字体大小
font-family: Arial,宋体; //字体样式，英文和中文
color: red; //字体颜色，红
font: oblique bold 20px/50px 宋体; //字体风格 字体粗细 字体行高/字体大小 字体样式
文本样式
background: rgba(0,0,255,0.4); //背景颜色
text-align: center; //排版，居中
text-indent: 2em; //首行缩进
line-height: 50px; //行高，改变行高可以改变字段间距
text-decoration: underline; //下划线
text-decoration: line-through; //删除线
text-decoration: overline; //上划线
vertical-align: middle; //和参照物水平对齐
超链接伪类
/*鼠标触碰后效果：字体变黄,字体变大*/
a:hover{
color: yellow;
font-size: 50px;
}
/*鼠标点击效果：背景变蓝*/
a:active{
background: blue;
}
/*一般a标签也会去除下划线*/
text-decoration: none;
阴影效果
/*text-shadow: 阴影颜色 水平偏移，垂直偏移，阴影半径*/
text-shadow: green 10px -10px 2px; //一个向右上角偏移10px，半径为2px的绿色阴影
列表
list-style:
none 去除样式
circle 空心圆
decimal 数字，有序列表
square 正方形
背景
<style>
div{
width: 720px;
height: 792px;
background-image: url("../resources/image/1.jpg");
background-position: 200px 10px; //图片定位
background: linear-gradient(19deg,#21D4FD 0%,#B721FF 100%); //渐变
/*https://www.grabient.com/*/
}
</style>
/*必须要写宽度和高度才能有背景图，默认是图片全部平铺*/
background-repeat: repeat-x; //水平平铺
background-repeat: repeat-y; //垂直平铺
background-repeat: no-repeat; //不平铺，也需要有宽度高度
/*background: 背景颜色 图片路径 图片水平偏移 图片垂直偏移 平铺方式*/
background: red url("../resources/image/2.jpg") 200px 10px no-repeat;
盒子模型
- margin：外边距
- border：边框
- padding：内边距
- 盒子大小：margin+border+padding+内容大小
边框
/*border: 粗细 样式 颜色*/
border: 1px solid red;
border-radius: 50px; //边框圆角
/*box-shadow: 阴影颜色 水平偏移，垂直偏移，阴影半径*/
box-shadow: green 10px -10px 2px; //盒子阴影
border-style:
solid //边框实线
dashed //边框虚线
border-radius: 50px; //四角同一弧度
border-radius: 50px 100px; //左上右下50，右上左下100
border-radius: 50px 100px 150px 200px; //左上50，右上100，右下150，左下200，顺时针
width=heigth=2*border-radius == 圆形
width=2*heigth=border-radius: heigth heigth 0 0 == 向上半圆
width=heigth=border-radius: heigth 0 0 0 == 左上扇形
外内边距
Html本身有的标签会有个默认的外边距，一般会手动写为0
body{margin: 0px;}
margin: 0px; //无外边距
margin: 0px auto; //上下外边距为0，左右外边距居中对齐
margin: 10px 20px 30px 40px; //上外边距为10，右外边为20，下外边距为30，右外边距40，顺时针
外边距与内边距操作一样
浮动
display
block //变为块元素，独占一行
inline //行内元素
inline-block //保持块元素但可以内联保证下一个元素可以在同一行
float
left //向左浮动
right //向右浮动
clear
left //左侧不允许有浮动元素
right //右侧不允许有浮动元素
both //两侧不允许有浮动元素
none
overfloat
hidden //修剪内容溢出
scroll //滚动条
父级边框塌陷
我的理解就是最外围的边框没有把内容包括起来。
解决办法
-
增加父级元素高度（外边框高度直到包含所有内容）
#father{ border: 1px red solid; heigth: 1000px; } -
设置一个空的div标签，清除浮动
<style> #clear{ clear: both; margin: 0; padding: 0; } </style> <div id="father"> <div id="clear"></div> </div> -
overfloat
#father{ border: 1px red solid; overflow: hidden; } -
父类添加伪类 :after
#father:after{ content: ''; display: block; clear: both; }
定位
相对定位
position: relative //相对原来的位置偏移，但原来的位置会被保留
/*下面要加上相对原来位置偏移多少
负数表示与相对方向相同，正数表示与相对方向相反*/
top: -20px; //向上偏移20
left: 10px; //向右偏移10
绝对定位
-
相对于父级元素定位
//父元素定位但不偏移办法 #father{ position: relative; } -
没有父级元素定位则相对于浏览器边框定位
position: absolute; //原来位置不保留
/*下面要加上相对原来位置偏移多少
负数表示与相对方向相同，正数表示与相对方向相反*/
top: -20px; //向上偏移20
left: 10px; //向右偏移10
固定定位
position: fixed; //相对浏览器定位，跟随滚动条移动
/*需要确定固定在哪里，下面是固定在右下角*/
right: 0;
bottom:0;
opacity
opacity: 0.5; //背景透明度
Z-index
类似图层：当两个标签叠加在同一位置时使用，确定其中一个标签在另一个标签之上。
<head>
<style>
#app{
padding: 0;
margin: 0;
width: 730px;
overflow: hidden;
font-size: 50px;
line-height: 100px;
border: 1px solid red;
position: relative;
}
.l,.b{
width: 730px;
height: 100px;
position: absolute;
top:700px;
}
.l{
color: white;
z-index: 1;
}
.b{
background: black;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li><img src="../resources/image/1.jpg" alt=""></li>
<li class="l">这是第一段文字</li>
<li class="b"></li>
</ul>
</div>
</body>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
