一、常见各种选择器.
- 标签选择器
- 类选择器
- id选择器
- 后代选择器
- 子代选择器
- 交集选择器
- 并集选择器
- 伪类选择器
1,标签选择器,通过直接选择标签的方式,来对标签的内部样式进行调整
em{
font-style: normal;
color: skyblue;
}
<p>新浪体育讯 7月16日是燕京啤酒<em>[微博]</em> </p>
2,类选择器,通过 .class(类名)的形式来选中标签。
.css{
font-style: normal;
color: skyblue;
}
<p class="css">新浪体育讯 7月16日是燕京啤酒<em>[微博]</em> </p>
3,id选择器,通过#id(id的值)来获取标签。
#char{
font-style: normal;
color: skyblue;
}
<p>新浪体育讯 7月16日是燕京啤酒<em >[微博]</em> </p>
<p id="char">独一的</p>
4,后代选择器,通过使用标签 +空格 +标签 会使得,div中所有的p标签样式发生变化。
div p{
font-size=30px;
}
<div>
<div>扭转空间
<p>榫子</p>
</div>
<p>测试未来</p>
</div>
<p>探看人生</p>
5,子代选择器,使用 >号来对父标签和子标签的连接。样式设置的效果只对直系子标签有效。
这个样式只对 测试未来 四个字有效。
div>p{
font-size=30px;
}
<div>
<div>扭转空间
<p>榫子</p>
</div>
<p>测试未来</p>
</div>
6,交集选择器,就是一个标签具有多个特征,使用多个特征来选中某个标签。
选中class="dcname"的div标签。
div.dcname{
color:red;
}
<div>
<div class="dcname">扭转空间
<p>榫子</p>
</div>
<p>测试未来</p>
</div>
7,并集选择器,就是多个标签同时选中,其中使用逗号“,”进行隔开。
div.dcname,div>div>p{
text-align:center;
}
<div>
<div class="dcname">扭转空间
<p>榫子</p>
</div>
<p>测试未来</p>
</div>
8,伪类选择器,通过使用 冒号“:” 来进行选择。
/*顺序不能变 第一个是没有访问的样式, 第二个访问后的样式,第三个是悬浮在标签上的样式,第四个是点击时候的样式*/
a:link{
color: #666;
text-decoration: none;
font-weight: bold;
font-size: 25px;
font-style: normal;
}
a:visited{
color: #00aaee;
text-decoration: underline;
/*font-weight: bold;*/
font-style: italic;
}
a:hover{
color: #ff3333;
text-decoration: none;
font-weight: bold;
}
a:active{
color: gold;
text-decoration: none;
font-weight: bold;
}
/* 以下是工作中常用设置。*/
a{
font: 20px "宋体";
background-color: #ecc000;
}
a:hover{
background-color: #cccccc;
}
<a href="http://www.baidu.com" target="_blank">百度</a>
二、 常用样式设置。
1) 显示模式
- 块元素,块元素,是指标签可以独立占一行或者是多行。其中标签的宽和高可以进行设置。常见的块元素有: div , p , h1, h2, h3, h4, h5, h6, ul ,ol ,li 等。
- 行内元素,是指该标签只能放置在一行内部,且标签的宽和高不可以进行设置,即使设置了也无效。常见的行内元素有: a, span ,em ,i ,u , s, del , ins , b ,strong 等。
- 行内块元素,是指标签只能占用一行,但是这个行的宽度和高度可以进行设置, 常见的行内块元素有: input, img, td等。
- 三者之间可以相互转换。
以块元素显示为: display:block;
以行内元素显示: display:inline;
以行内块元素显示: display:inline-block;
2) 字体设置
- 字体风格 font-style:{ normal,italic,oblique} 正常的和斜体
- 字体粗细 font-weight:{ normal,bold} 正常的是400,加粗的是700.
- 字体大小 font-size: 25px; 单位使用px。
- 字体格式 font-family: “微软雅黑”,Arial,“宋体”;找不到第一种字体再去寻找第二种字体,依次下去进行。如果设置的字体都没有就是用默认的字体.
- 字体 font: font-style font-weight font-size/line-height font-family; 其中后面两个参数设置不可以省略.
3) 宽/高/背景/颜色/文本设置
- 宽设置: width:500px; width=80%;
- 高设置: height=30px; height=10%;
- 行高设置:line-height=30px;
- 背景颜色: background-color: red;
- 背景图片: background-image: url(/img/*.jpg)
- 文本对齐: text-align: left/ right/ center;
- 文本装饰: text-decoration: none /underline/ overline/ line-through /blink
- 颜色:color: #ffeecc;
三、 练习
一:导航栏练习
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>第三天导航栏测试练习</title>
<style>
/*行内元素和行内块元素可以看作为文本*/
.nav a{
width: 120px;
height: 50px;
display: inline-block;
background-image: url(../img/bg.png);
text-align: center;
line-height: 50px;
text-decoration: none;
font-family: Arial;
}
.nav a:hover{
background-image: url(../img/bgc.png);
}
.nav{
text-align:center;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">
网站首页
</a>
<a href="#">
网站首页
</a>
<a href="#">
网站首页
</a>
<a href="#">
网站首页
</a>
<a href="#">
网站首页
</a>
<a href="#">
网站首页
</a>
</div>
</body>
</html>
二:百度首页
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>百度一下,你就知道</title>
<style>
.div{
text-align: center;
}
div a{
font-size: 14px;
/*letter-spacing: 1px;*/
color: blue;
}
div a.extral{
font: bold 14px 微软雅黑;
text-decoration: none;
color: #222222;
}
div .ipt{
width: 420px;
height: 26px;
display: inline-block;
}
div input{
width: 100px;
line-height: 26px;
}
div.it{
margin-top: 44px;
margin-bottom: 20px;
}
div a.minsize {
font-size: 12px;
}
div.dmargin{
margin-top: -14px;
}
div span.minsize{
font-size: 12px;
/*margin-top: 10px;*/
line-height: 34px;
color: black;
}
</style>
</head>
<body>
<div class="div">[外链图片转存失败(img-9mWTU5OG-1562034192269)(https://mp.csdn.net/img/bdlogo.gif)]</div>
<div class="div">
<a href="#">新 闻</a>
<a href="#" class="extral">网 页</a>
<a href="#">贴 吧</a>
<a href="#">知 道</a>
<a href="#">音 乐</a>
<a href="#">图 片</a>
<a href="#">视 频</a>
<a href="#">地 图</a>
</div>
<div class="div it">
<input type="text" class="ipt">
<input type="submit" value="百度一下">
</div>
<div class="div">
<a href="#">百科</a>
<a href="#">文库</a>
<a href="#">hao123</a> <strong>|</strong>
<a href="#">更多>></a>
</div>
<div class="div it " >[外链图片转存失败(img-tcyCnYTV-1562034192273)(https://mp.csdn.net/img/ic.jpg)] <a href="#" class= "minsize">
百度地图带你吃喝玩乐 , 全心全意为人民服务
</a></div>
<div class="div it">
<a href="#" class="minsize">把百度设为主页</a>
<span> </span>
<a href="#" class="minsize">安装百度卫士</a>
</div>
<div class="div dmargin">
<a href="#" class="minsize">加入百度推广</a><span> </span><strong>|</strong>
<a href="#" class="minsize">搜索风云榜</a><span> </span><strong>|</strong>
<a href="#" class="minsize">关于百度</a><span> </span><strong>|</strong>
<a href="#" class="minsize">About Baidu</a>
</div>
<div class="div">
<span class="minsize">©2013 Baidu 使用百度前必读 京ICP证030173号</span>
</div>
</form>
</body>
</html>