8.8.3css
-
CSS 层叠样式表 可以为一个元素添加不同的样式,多个样式 可以为一个元素重复添加相同的样-> 以优先级,最新的为主
-
语法: 选择器 : 选中元素(一个,多个) 样式表 : 样式-> 属性名 : 属性值 选择器 { 样式; 样式; .... }
-
CSS的使用方式: 1.行内样式表 行内: 元素所在行内部,元素上 在标签上添加属性style属性,属性值中定义css样式表 2.内部样式表 内部 : html内部 在head中添加一对style标签对,标签对中添加CSS语法 3.外部样式表 外部 : html外部,单独css文件 在html中使用link标签,引入外部css文件
-
优先级: 谁离元素更近优先显示谁 行内优先级最高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>入门</title>
<link rel="stylesheet" type="text/css" href="css/first.css"/>
<!-- 内部样式表 -->
<style type="text/css">
div {
border: 10px solid plum;
width: 100px;
height: 100px;
color: green;
}
.size{
font-size: 30px;
}
</style>
</head>
<body>
<p style="width: 100px;height: 100px;background: skyblue;">p1</p>
<p style="width: 100px;height: 100px;background: skyblue;">p2</p>
<p class="size" style="width: 100px;height: 100px;background: skyblue;">p3</p>
<div class="size">div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>入门</title>
<!-- 内部样式表 -->
<style type="text/css">
div {
border: 10px solid plum;
width: 100px;
height: 100px;
}
</style>
<link rel="stylesheet" type="text/css" href="css/first.css"/>
</head>
<body>
<div class="size">div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>
8.8.4基础选择器
-
选择器: 选中元素(一个,一组) 分类: 基础选择器 * #id选择器 : 根据标签的id属性选中一个元素,因为id属性值不能重复 .类选择器 | class选择器 根据元素的class属性值匹配一个|一组元素 class : 可以重复,可以设置值列表 元素选择器|标签选择器 根据标签名选中一个或者一组元素 *通配符 : 选择所有元素 去除浏览器的默认样式
-
基础优先级: id > class > 元素 > 通配符
-
群组选择器 : 根据不同的选择器选中多个元素 选择器1,选择器2...{ }
-
属性选择器 组合选择器 伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>基础选择器</title>
<style>
/* 去除浏览器的默认样式 */
*{
margin: 0;
padding: 0;
}
#box{
background-color: #DDA0DD;
}
.red{
color: red;
}
.yellow{
border: 2px solid yellow;
}
p{
width: 100px;
background-color: chocolate;
}
/* 群组选择器 */
#box,.red,span{
font-weight: bold;
}
</style>
</head>
<body>
<div>div1</div>
<div id="box">div2</div>
<div class="red yellow">div3</div>
<p class="red">p1</p>
<p>p2</p>
<span>span</span>
</body>
</html>
8.8.5其他选择器
-
组合选择器
-
后代选择器 父元素 子元素{} 选择父元素中的所有子元素,包含直接子元素或者间接子元素
-
子元素选择器 父元素>子元素{} 选择父元素中的满足条件的直接子元素
-
相邻兄弟选择器 选择器1 + 选择器2 { 选中选择器紧挨着后面的兄弟元素 ...... }
-
普通兄弟选择器 选择器1 ~ 选择器2 { 选中选择器后面的所有满足条件的兄弟元素 ...... } 注意: 样式的继承: 能被继承的样式 : 字体,颜色,背景... 不能被继承的样式 : 内外边距,边框等...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>其他选择器</title>
<style>
/* 后代选择器 */
/* .food li {
border: 1px solid red;
} */
/* 子元素选择器 */
.food > li {
border: 1px solid red;
}
/* 相邻兄弟选择器 */
/* .li1 + li{
background: #D2691E;
} */
/* 普通兄弟选择器 */
.li1 ~ li{
background: #D2691E;
}
.food{
color: #FFFF00;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>食物</h1>
<ul class="food">
<li>水果
<ul>
<li class="li1">香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
</body>
</html>
-
属性选择器 [] [属性名] : 存在某个名字属性的元素被选中 选择器[属性名] : 被当前选择器选中的元素中,存在某个名字属性的元素被选中 [属性名=属性值] : 存在某个名字属性,并且等于指定的属性值,的元素被选中 选择器[属性名=属性值] : 被当前选择器选中的元素中,存在某个名字属性,并且等于指定的属性值,的元素被选中
-
伪类选择器 : 常用在a标签上的伪类选择器 a:link 未访问的链接 a:visited 已访问的链接 a:hover 鼠标划过链接 -> a:active 连接被按下时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>其他选择器</title>
<style>
/* [class] {
border: 2px dotted #DDA0DD;
]} */
/* ul[class] {
border: 2px dotted #DDA0DD;
]} */
/* li[class=food] {
border: 2px dotted #DDA0DD;
]} */
div{
width: 200px;
height: 200px;
background: #FF0000;
/* 圆角 */
/* border-radius: 100%;*/
border-radius: 100px;
}
div:hover {
background-color: yellow;
}
div:active {
background-color: blue;
}
/* 选中作为父元素的第二个子元素的li标签 */
/* li:nth-child(2){
border: 2px dashed #008000;
} */
.item:nth-child(even){ /* even偶数 odd奇数*/
border: 2px dashed #008000;
}
</style>
</head>
<body>
<h1>食物</h1>
<ul class="food">
<li>水果
<ul>
<li class="food item">香蕉</li>
<li class="item">苹果</li>
<li class="item">梨</li>
<li class="item">人参果</li>
<li class="item">杨桃</li>
</ul>
</li
<li class="li2">蔬菜
<ul>
<li class="item">白菜</li>
<li class="item">油菜</li>
<li class="item">卷心菜</li>
</ul>
</li>
</ul>
<div>div</div>
</body>
</html>
8.8.6背景样式
-
颜色的设置 : 背景颜色,字体颜色..
-
1.颜色的英文单词 red,green...
-
2.颜色的十六进制 #6个字符 0~f #000000->黑色 #ffffff->白色
-
3.rgb 三原色 rgb(0~255,0~255,0~255)
-
4.rgba(0~255,0~255,0~255,0~1) a透明度 0完全透明 1完全不透明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>背景样式</title>
<style>
#box{
width: 500px;
height: 500px;
border: 10px solid darkred;
/* 背景颜色 */
/* background-color: #ca6c6c; */
/* background-color: rgb(74,210,170); */
background-color: rgb(74,210,170,0.5);
background-image: url(img/xianjian3.jpg);
/* 背景图片是否平铺 */
background-repeat: no-repeat;
/* background-repeat: repeat-x;
background-repeat: repeat-y; */
/* 背景图片大小 */
background-size: 200px;
/* 背景图片位置 : 如果值设置一个方向的位置,另一个方向默认居中 */
background-position: right ;
background-position: top ;
background-position: right bottom ;
background-position: 100px 200px ;
/* background 背景复合属性 -> 个数,顺序都可以改变*/
background: olive url(img/xianjian3.jpg) repeat-x bottom;
background: #0000FF;
background: #0000FF;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
8.8.7文本字体样式
-
字体样式 1.color : 字体颜色 2.font-size 字体大小 谷歌浏览器默认字体大小为16px 3.font-weight 字体是否加粗 100~900 ,700及以上是加粗,600及一下是正常 font-weight: lighter; 细体 font-weight: normal; 正常 font-weight: bold; bolder 加粗 4.font-style 字体风格 italic 斜体 normal 正常 5.font-family 字体样式
-
文本样式 1. text-decoration 设置中划线,下划线,上划线 none 去除样式 2. text-indent 首行缩进
-
居中问题： 1.水平居中 text-align 元素中内容在元素的宽度中水平对其方式 -》 非行内元素有效 left right center 2.line-height 行高 行高与块元素的高度相同,这一行文本就会在块元素中垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文本字体样式</title>
<style>
.div1{
/* font-size: 14px; */
font-weight: lighter;
text-decoration: underline; /* 下划线*/
}
.div2{
width: 600px;
height: 100px;
background-color: #DDA0DD;
/* font-weight: 700; */
font-weight: normal;
font-style: italic;
font-family: 宋体;
text-decoration: line-through; /* 中划线*/
/* 对齐方式 */
text-align: center;
line-height: 100px;
}
.div3{
/* font-size: 18px; */
font-weight: bold;
font-family: "华文行楷","华文彩云";
text-decoration: overline; /* 上划线*/
}
a{
text-decoration: none; /* 去除划线*/
color: #000;
}
.p1{
text-indent: 200px;
text-indent: 2em;
font-size: 26px;
}
</style>
</head>
<body>
<!--
字体样式
1.color : 字体颜色
2.font-size 字体大小
谷歌浏览器默认字体大小为16px
3.font-weight 字体是否加粗
100~900 ,700及以上是加粗,600及一下是正常
font-weight: lighter; 细体
font-weight: normal; 正常
font-weight: bold; bolder 加粗
4.font-style 字体风格
italic 斜体
normal 正常
5.font-family 字体样式
文本样式
1. text-decoration 设置中划线,下划线,上划线
none 去除样式
2. text-indent 首行缩进
居中问题：
1.水平居中 text-align 元素中内容在元素的宽度中水平对其方式
-》 非行内元素有效
left right center
2.line-height 行高
行高与块元素的高度相同,这一行文本就会在块元素中垂直居中
-->
<div class="div1">div1 微软雅黑</div>
<div class="div2">div2 宋体</div>
<div class="div3">div3 黑体</div>
<a href="#">a标签</a>
<p class="p1">
鲁迅〔1881年9月25日～1936年10月19日〕，中国文学家、思想家和革命家。原名周树人，字豫才，浙江绍兴人。。
鲁迅的一生，对中国文化事业作出了巨大的贡献，1936年10月19日因肺结核病逝于上海，上海民众上自发自发举行公举行公自发举行公万名自发举行公祭、送葬，葬于虹桥万国公墓。
1956年，鲁迅遗体移葬虹口公园，毛泽东为重建的鲁迅墓题字。1938年出版《鲁迅全集》〔二十卷〕。
</p>
</body>
</html>
8.8.8标签
-
标签: 行内元素 : 能与其他内容同行显示 宽度与内容撑起 不能设置宽高 只能设置左右内外边距 能够嵌套行内,文本
-
块元素 : 独占一行,前后换行 独占一行 可以设置宽高 能够设置上下左右的内外边距 能够嵌套块,行内,文本..
-
diaplay : none 元素消失 inline 行内元素 block 块元素 inline-block 行内块 具有行内元素的特点,具有块元素的特点 与其他元素同行显示 可以设置宽高 可以设置上下左右的内外边距 可以嵌套其他块元素,行内元素与文本
-
注意 : inline-block可以使块元素同行显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>display</title>
<style>
.box1{
background: pink;
height: 100px;
width: 100px;
/* 行内块 */
display: inline-block;
}
.box2{
background: cyan;
height: 100px;
width: 100px;
/* 行内 */
display: inline;
}
span{
background: #FFFF00;
height: 100px;
width: 100px;
/* 块元素 */
display: block;
}
</style>
</head>
<body>
<!--
标签:
行内元素 : 能与其他内容同行显示
宽度与内容撑起
不能设置宽高
只能设置左右内外边距
能够嵌套行内,文本
块元素 : 独占一行,前后换行
独占一行
可以设置宽高
能够设置上下左右的内外边距
能够嵌套块,行内,文本..
diaplay :
none 元素消失
inline 行内元素
block 块元素
inline-block 行内块
具有行内元素的特点,具有块元素的特点
与其他元素同行显示
可以设置宽高
可以设置上下左右的内外边距
可以嵌套其他块元素,行内元素与文本
注意 : inline-block可以使块元素同行显示
-->
<div class="box1">div1</div>
<div class="box2">div2</div>
<span>span</span>
<a href="#">a</a>
</body>
</html>
8.8.9导航
-
首先，ul li{float:left},表示让ul 下的所有li元素向左浮动。如果不加这个，他们不能够在一行显示，会显示出多行，float:left你大概可以理解为，从左边开始排列，排列成一行；float:right，是从右边排列。注意，是可以这样理解。
-
其次 ul li 之间不能有逗号， 这个是css写法的规定。。。父级元素 儿子子元素 孙子元素 ，中间家空格就行，不需要什么其他标记。
-
第三，ul.first a代表class为first的列表里面的所有a元素。(注意.的位置)
-
background:#faa819 url(images/mainNavBg.gif) repeat-x。同时定义一个背景，比如是400400的一个div，那么它范围内所有的背景都是#faa819这个颜色，但是背景图片可能只有100100那么大，它会覆盖背景颜色。而且这个图片的位置是可以控制的。完整的语法可以这样：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
/* 去除列表项标记 */
list-style: none;
}
li{
display: inline-block;
width: 25%; /* 所占 父元素宽度的百分比*/
height: 60px;
line-height: 60px;
background: #000;
font-size: 26px;
color: #fff;
text-align: center;
}
li:hover{
color: hotpink;
border-bottom: 3px solid deeppink;
}
</style>
</head>
<body>
<!--导航-->
<ul>
<li>我的说说</li><li>我的相册</li><li>我的音乐</li><li>我的个性签名</li>
</ul>
</body>
</html>
8.9定位
-
文档流 : 默认在文档流中进行排版 块元素从上到下,行内元素从左到右
-
定位: position 需要配合方向属性一起设置 top left right bottom
-
相对定位 : relative 相对于元素的本身位置进行定位 在文档流中位置不变,显示上的定位效果
-
绝对定位 : absolute 默认的绝对定位 根据浏览器的窗体进行定位,定义一次,定位当文档的某一个位置不变 子父级定位:当前元素的父级是否存在position:relative的设置,如果存在就为子父级定位,不存在为默认的定位方式
-
固定定位 fixed 根据浏览器的窗体进行定位,相对窗体定位不变
-
注意: 绝对定位与固定定位为完全脱离文档流的定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定位</title>
<style>
#box{
width: 800px;
height: 1800px;
border: 1px solid black;
/* 子父级定位 */
/* position: relative; */
}
#box div{
width: 100px;
height: 100px;
}
.item1{
background: salmon;
}
.item2{
background: paleturquoise;
/* 相对定位 */
position: relative;
left: 100px;
top : 100px;
}
.item3{
background: #FFC0CB;
/* 绝对定位 */
position: absolute;
right: 0;
bottom: 0;
}
.item4{
background: khaki;
/* 固定定位 */
position: fixed;
right: 0;
top: 350px;
}
</style>
</head>
<body>
<!--
文档流 : 默认在文档流中进行排版
块元素从上到下,行内元素从左到右
定位: position
需要配合方向属性一起设置 top left right bottom
相对定位 : relative
相对于元素的本身位置进行定位
在文档流中位置不变,显示上的定位效果
绝对定位 : absolute
默认的绝对定位
根据浏览器的窗体进行定位,定义一次,定位当文档的某一个位置不变
子父级定位:当前元素的父级是否存在position:relative的设置,如果存在就为子父级定位,不存在为默认的定位方式
固定定位 fixed
根据浏览器的窗体进行定位,相对窗体定位不变
注意: 绝对定位与固定定位为完全脱离文档流的定位
-->
<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>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
