1.css基本内容和使用方式
css层叠样式表
为html中的元素添加样式
相同的样式多个，会覆盖
不同的样式多个，会添加
语法：
选择器{
样式；
样式；
}
样式：
属性名： 属性值；
注意：为元素设置样式建议使用css
使用方式：
行内样式表：在元素的开始标签上添加一个style属性，样式定义在style属性值中
内部样式表：head中定义style标签对，标签对中定义css样式
外部样式表：在外部定义一个css文件，在要使用的html中通过link标签引入
样式表的优先级（优先显示谁）：
谁离元素进就有优先显示谁
路径：
回到上一层../
进入某一路径 路径名/
<!DOCTYPE html>
<html lang="en" xmlns:>
<head>
<meta charset="UTF-8">
<title>使用方式</title>
<!--内部样式表-->
<style>
div{
width:100px;
heighht:100px;
background: deeppink;
border-radius: 100%;
}
</style>
<!--link标签引入外部样式表-->
<link rel="stylesheet" href="css/forst.css">
</head>
<body>
<div style="width: 200px;height: 200px;background: plum">志康君</div></body>
<div>泽鹏君</div>
<div>郭老贼</div>
</html>
div{
font-size: 26px;
color: white;
text-align: center;
line-height: 100px;
background: cyan;
}
2.基础选择器
分类：
#id选择器 : 根据元素id属性值,选中一个元素
.class|类选择器 : 根据元素的class属性值,选中一个或者组员元素
标签|元素选择器 : 根据标签名选中一个或者一组元素
*通配符 : 选中所有元素
基础选择器的优先级：
id>class>元素>通配符
元素的class属性值可以相同，并且值列表可以存在多个值
群组选择器：通过多种选择器匹配到多个元素同时选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style>
/*id选择器*/
#box{
border: 1px solid fuchsia;
background: skyblue;
}
/*.class|类选择器*/
.green{
background: green;
}
.red{
color: red;
}
/*元素选择器*/
div{
font-size: 30px;
background: palevioletred;
}
/*通配符*/
/* 去除浏览器的默认样式 : 内外边距*/
*{
margin: 0;
padding: 0;
}
/*群组选择器*/
#box,.red,p{
font-style: italic; /*斜体*/
}
ul,ol{
background: red;
}
</style>
</head>
<body>
<div id="box">div1</div>
<div class="green red">div2</div>
<p class="green">p</p>
<ul>
<li>1</li>
<li>2</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
</ol>
</body>
</html>
3.其他选择器
属性选择器[]
根据元素的属性与属性值选中一个或者一组元素
[属性名]：包含这个属性的元素被选中
元素名[属性名]：指定元素中具有这个属性的元素被选中
元素名[属性名='属性值'] : 指定元素中具有这个属性并且属性值为定值的的元素被选中
伪装选择器：
hover：当鼠标悬停在元素上是选中元素添加样式
first-child：作为第一个元素
last-child：作为最后一个元素
nth-child（n）：作为第几个元素
<<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>其他选择器</title>
<style>
/*具有class属性的就被选中*/
/*[class]{
background: plum;
}*/
/*所有的li标签标签中具有class属性的被选中*/
/*li[class]{
background: plum;
}*/
/*li标签中有class属性并且属性值为item的被选中*/
li[class='item']{
background: plum;
}
#box{
width: 200px;
height: 200px;
background: red;
border-radius: 100px;
color: #fff;
font-size: 20px;
text-align: center;
line-height: 200px;
}
/*位列选择器*/
#box:hover{
background: yellow;
color: #000;
}
li:last-child{
border: 1px solid firebrick;
}
li:nth-child(2){
background: blue;
}
</style>
</head>
<body>
<ul>
<li class="first">泽</li>
<li>鹏</li>
<li>真</li>
<li>狗</li>
</ul>
<ol>
<li class="item">是</li>
<li>的</li>
</ol>
<div id="box">
box
<!--<div class="item">
box的子元素item
<div>孙子元素div</div>
</div>-->
</div>
</body>
</html>
4.组合选择器
组合选择器：
后代选择器 空格
子元素选择器 >
选中第一层直接子元素，不包含孙子元素
相邻兄弟 +
普通兄弟 ~
样式：
可以继承的样式：字体样式 文本样式 背景样式等........
不可以被继承的样式：边框，内外边距的样式等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组合选择器</title>
<style>
/*后代选择器 空格*/
li{
font-size: 24px;
}
ul li{
background: darkgoldenrod;
}
/*选中所有body中的div*/
/*body div{
border: 1px dotted blue;
}*/
/*子元素选择器*/
body>div{
border: 1px dotted blue;
}
/*相邻兄弟*/
/*.first+li{
color: paleturquoise;
}*/
/*普通兄弟*/
.first~li{
color: paleturquoise;
}
</style>
</head>
<body>
<ul>
<li class="first">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
</ol>
<div id="box">
box
<div class="item">
box的子元素item
<div>孙子元素div</div>
</div>
</div>
</body>
</html>
5.导航
display:
none 元素消失
block 块元素
inline 行内元素
inline-block 行内块
具有行内与块的特点
宽度由内容撑起
设置宽高
设置上下左右内外边距
可以和其他元素同行显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航</title>
<style>
/*清除浏览器默认样式*/
*{
margin: 0;
padding: 0;
}
ul{
list-style: none; /*去除列表项标记*/
}
ul li{
/*为了让块元素同行显示*/
display: inline-block;
width: 25%;
height: 50px;
/*内容在元素的宽度的水平居中*/
text-align: center;
line-height: 50px;
background: black;
}
li a{
color: #fff;
font-size: 20px;
text-decoration: none; /*去重下划线*/
}
li a:hover{
color: pink;
}
li:hover {
border-bottom: 5px solid pink;
}
</style>
</head>
<body>
<ul>
<li><a href="#">我的首页</a></li><li><a href="#">我的相册</a></li><li><a href="#">我的说说</a></li><li><a href="#">我的音乐</a></li>
</ul>
</body>
</html>
6.定位
定位： position 需要配合方向值一起使用 top left right bottom
相对定位 relative
相对于元素原位置进行定位
在文档中位置没有改变，只是显示的不同
绝对定位 absolute
相对于浏览器的窗口进行定位,定位到文档中某个位置,不会改变
子父级定位
当父级元素上有设置position:relative,当前元素的绝对定位就是相对于父级进行定位
固定定位 fixed
定义在窗体的某个不会改动
注意: 绝对定位与固定定位是完全脱离文档流的定位方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style>
#box{
height: 1600px;
width: 500px;
border: 5px solid red;
/*父级: 相对定位*/
position: relative;
margin: 0 auto; /*块元素水平居中*/
}
#box div{
width:100px ;
height: 100px;
}
.item1{
background: yellow;
}
.item2{
background: greenyellow;
/*相对定位*/
position: relative;
top: -100px;
left: 100px;
}
.item3{
background: pink;
/*绝对定位*/
position: absolute;
right: 0;
bottom: 0;
}
.item4{
background: paleturquoise;
/*固定定位*/
position: fixed;
top: 300px;
right: 0;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="box">
<div class="item1">div1</div>
<div class="item2">div2</div>
<div class="item3">div3</div>
<div class="item4"><a href="#top">回到顶部</a></div>
</div>
</body>
</html>
6292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
