文章目录
- 网页布局实战
- 一 CSS选择器
- a.基本选择器
- b.复杂选择器
- c 伪选择器
- d 伪元素选择器
- 二 CSS常用样式
- 1.文本相关属性
- 2.背景属性
- 1)背景颜色
- 2)背景图片
- 3)背景平铺
- 4)背景位置
- 5)设置背景图片大小&＃xff1a;
- 6)background 背景复合属性
- 案例1
- 案例2
- 案例3
- 案例4-贯穿项目
网页布局实战
一 CSS选择器
a.基本选择器
1.元素选择器
DOCTYPE html>
<html>
<head>
<meta charset&＃61;"utf-8">
<title>title>
<style>
div{
height: 100px;
width: 100px;
background-color: #00FFFF;
}
span{
background-color: red;
}
a{
background-color: blueviolet;
}
style>
head>
<body>
<div>我是一个divdiv>
<br />
<div>我是一个divdiv>
<span>我是一个spanspan>
<a href&＃61;"https://www.baidu.com">百度a>
body>
html>
2.类选择器
DOCTYPE html>
<html>
<head>
<meta charset&＃61;"utf-8">
<title>title>
<style>
.content{
}
.item{
}
//要求class 里面同时存在两个名字
.item.content{
}
style>
head>
<body>
<div class&＃61;"content">
<div class&＃61;"item content">
<div class&＃61;"item">
body>
html>
3.id选择器
DOCTYPE html>
<html>
<head>
<meta charset&＃61;"utf-8">
<title>title>
<style>
#one{
width: 100px;
height: 100px;
background-color: red;
}
#two{
width: 200px;
height: 200px;
background-color: blue;
}
style>
head>
<body>
<div id&＃61;"one">div一div>
<div id&＃61;"two">div二div>
body>
html>
b.复杂选择器
1 并列声明
<div>
我是一个div
div>
<span>我是一个spanspan>
2 后代选择器
h1 span {
color:red;
}
只要em元素是h1的后代&＃xff0c;都会被选中
<div>
我是一个div
<br />
<span>我是一个spanspan>
div>
<span>我是div外面的spanspan>
3 子元素选择器
只找指定元素下面儿子&＃xff0c;不会继续往下找
DOCTYPE html>
<html lang&＃61;"en">
<head>
<meta charset&＃61;"UTF-8">
<meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"IE&＃61;edge">
<meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0">
<title>Documenttitle>
<style>
.box > span{
color: red;
}
style>
head>
<body>
<div class&＃61;"box">
<span>345span>
<div>
<span>123span>
div>
div>
<span>455span>
body>
html>
4 相连兄弟选择器(扩展)
<div></div>
<div class&＃61;"box1"></div>
<div>123</div>
<div>456</div>
选中第二个div
div:net-child(2){
}
//必须往后找 123
.box1 &＃43; div &＃43; div{
}
5 属性选择器
这个属性可以是用户自定义属性&＃xff0c;也可以标签默认官方属性
"en">
"UTF-8">
"X-UA-Compatible" content&＃61;"IE&＃61;edge">
"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0">
"username">455
"app">div
"app1">div
"">div3
6 特殊选择器*
c 伪选择器
语法:
选择器:伪类名 {
}
DOCTYPE html>
<html lang&＃61;"en">
<head>
<meta charset&＃61;"UTF-8">
<meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"IE&＃61;edge">
<meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0">
<title>Documenttitle>
<style>
a:link{
background-color: black;
}
a:hover{
background-color: red;
}
a:active{
background-color: aqua;
}
a:visited{
background-color: yellow;
}
style>
head>
<body>
<a href&＃61;"#">百度一下a>
body>
html>
d 伪元素选择器
提供两个比较重要的选择器
after&＃xff1a;给指定的元素内部最后面增加内容
brefore&＃xff1a;给指定元素内部最前面增加内容
.clearfix::after{
content:"";
display:block;
clear:both
}
以前语法是必须用&＃xff1a;&＃xff1a;表示伪元素&＃xff0c;现在可以用&＃xff1a;来表示
一般为了区分&＃xff1a;采用两个冒号表示伪类
二 CSS常用样式
1.文本相关属性
| 属性名 | 值 | 解释 | 说明 |
|---|
| font-size | 16px | 字体大小 | 默认为16像素 |
| font-weight | normal 正常 | bold 加粗 | 字体粗细 | 设置字体加粗 |
| line-height | 24px | 行高 | 文本垂直对齐,一般跟父容器等高 |
| color | red | #0099aa | rgb(0,0,0) | 字体颜色 | |
| text-decoration | none|underline|line-through | 字体装饰线 | |
| text-align | left | center | right | 水平对齐方式 | |
| text-indent | 24px | 2em | 文本缩进 | 一般使用在段落前缩进两个字 |
| font-style | noraml 正常 | italic 斜体 | 文字样式 | |
2.背景属性
1)背景颜色
background-color:red | #ffdd00 | rgb(222,100,0) | rgba(255,255,255,0.4)
2)背景图片
background-image:url(“路径”)
3)背景平铺
background-repeat:repeat|no-repeat|repeat-x|repeat-y
重复 不重复 横向重复 纵向重复
4)背景位置
background-position&＃xff1a;横向 纵向
取值&＃xff1a;包含两个&＃xff0c;横向位置 纵向位置
示例&＃xff1a;
百分比&＃xff1a; 50% 50%
固定名称&＃xff1a;left center right top bottom
像素&＃xff1a;20px 100px
5)设置背景图片大小&＃xff1a;
background-size&＃xff1a;
contain:图片会放大或者缩小&＃xff0c;当一变铺满了这个屏幕。另外一边留白
cover&＃xff1a;等比列放大图片&＃xff0c;直到盒子被铺满才停下来
你也可以手动设置图片尺寸
6)background 背景复合属性
background:颜色 图片 重复 定位;
说明&＃xff1a;以后我们用背景都可以只用一条数属性&＃xff1a;background
案例1
画两个宽高均为200px的div矩形,描出border.
1.两个div上下摆放,留出间距25px.
2.两个div左右摆放,留出间距25px.
3.删除一个div,另一个div水平居中摆放.
4.在该div中写"蜗牛"字样,要求相对于div水平居中.
5.在该div中写一段文字 :
-“蜗牛提倡项目驱动和例子驱动,学员工作能力强,更受企业欢迎.”
案例2
案例3
案例4-贯穿项目
京公网安备 11010802041100号