标签:href 浏览器 效果 背景色 doctype 一起 占用 ted 背景颜色
1-18 CSS选择器行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-color: cornflowerblue;">head</div>
<div>body</div>
<div>foot</div>
</body>
</html>
代码:
一般网页分为3个部分,头部,中间,尾部
在标签内些 style叫做行内样式,只对所在的标签设计起作用。
上图:可以为其编辑背景颜色,这样能更方便的设计样式,比如能更好的观察期高度、宽度等。
上图:该颜色可以在chrome浏览器中,来调色。
RGB颜色表:https://tool.oschina.net/commons?type=3
上图:在上面的网址中,可以查看相应的颜色,然后通过颜色表格上面的工具来调整颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-color: cornflowerblue; height: 48px; width: 100px">head</div>
<div>body</div>
<div>foot</div>
</body>
</html>
代码:设计高度、宽度
上图:图中看到的背景色宽度和高度与代码中的设计相同
页内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
background-color: cornflowerblue;
}
#i2{
background-color: goldenrod;
}
#i3{
background-color: green;
}
</style>
</head>
<body>
<div id="i1">head</div>
<div id="i2">body</div>
<div id="i3">foot</div>
</body>
</html>
代码:
在head中使用style设计叫做业内样式,可以针对当前页面的代码进行样式设计。
id是唯一的,不可重复。
上图:选择不同的id设计了不同的背景颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1,#i2,#i3{
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div id="i1">head</div>
<div id="i2">body</div>
<div id="i3">foot</div>
</body>
</html>
代码:将3个id使用逗号组合起来,一起设计其样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div class="c1">head</div>
<div class="c1">body</div>
<div class="c1">foot</div>
</body>
</html>
代码:多个标签可以设计成一类标签,针对这一类标签进行样式设计。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1,.c2,.c3{
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div class="c1">head</div>
<div class="c2">body</div>
<div class="c3">foot</div>
</body>
</html>
代码:使用逗号将不同类的标签组合起来设计样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div span{
background-color: green;
}
</style>
</head>
<body>
<div class="c1">
<span>head</span>
</div>
<div class="c2">body</div>
<div class="c3">foot</div>
</body>
</html>
代码:使用div加span的关联方式,来关联这两个标签,然后对其设计样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 span{
background-color: green;
}
</style>
</head>
<body>
<div class="c1">
<span>head</span>
</div>
<div class="c2">body</div>
<div class="c3">foot</div>
</body>
</html>
代码:使用.c1加span的方式关联
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input[type=‘text‘]{
background-color: cornflowerblue;
}
</style>
</head>
<body>
<input type="text">
<input type="password">
</body>
</html>
代码:设计input标签且其中属性是type=‘text‘的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background: red;
color: white;
}
.c2{
font-size: 50px;
}
</style>
</head>
<body>
<div class="c1 c2">testtest</div>
</body>
</html>
代码:当针对同一个标签进行多个样式设计时,如过没有冲突,就会叠加效果。
上图:两个样式的设计,体现在了同一个标签上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background: red;
color: white;
}
.c2{
font-size: 50px;
color: black;
}
</style>
</head>
<body>
<div class="c1 c2">testtest</div>
</body>
</html>
代码:样式设计冲突时,使用离标签最近的设计样式(也就是使用.c2的设计)
上图:可以看到字体是黑色,使用了.c2的设计样式。
行内设计>页面设计(页面比较最近的设计)>外部设计
<!--html文件-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="c1 c2">testtest</div>
</body>
</html>
代码:使用link rel="stylesheet" href="index.css" 引入外部css文件的设计样式
<!--css文件-->
.c1{
background: red;
color: white;
}
.c2{
font-size: 50px;
color: black;
}
代码:该css文件中的设计样式,可以同时被多个html引用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
border: 4px dotted red;
}
</style>
</head>
<body>
<div>123123123</div>
</body>
</html>
代码:border: 4px dotted red; 边框 宽度 样式 颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 48px;
width: 80%;
border: 1px solid red
}
</style>
</head>
<body>
<div>123123123</div>
</body>
</html>
代码:
宽度设计为80%,这样会根据屏幕的宽度自动缩进80%;
高度不建议直接使用百分比,因为高度是可以无穷高的,会有滚动条,所以高度使用百分比是不合理的; 可以写两个层级标签,父集标签设计好高度和宽度以后,在子标签中设计百分比时,是根据父集标签高度宽度来自动缩进的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 48px;
width: 80%;
border: 1px solid red;
font-size: 16px; /*设计字体大小*/
text-align: center; /*水平居中*/
line-height: 48px; /*与height相同,就是垂直居中*/
font-weight: bold; /*字体加粗*/
}
</style>
</head>
<body>
<div>123123123</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
width: 20%;
background-color: red;
}
#i2{
width: 80%;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div id="i1">123</div>
<div id="i2">abc</div>
</body>
</html>
代码:设计两个div标签一个宽度为20%,一个为80%。
上图:两个标签个占一行,这是因为他们是块级标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
width: 20%;
background-color: red;
float: left;
}
#i2{
width: 60%;
background-color: cornflowerblue;
float: left;
}
</style>
</head>
<body>
<div id="i1">123</div>
<div id="i2">abc</div>
</body>
</html>
代码:使用float可以让div标签浮动,浮动起来的话就不会再占用整行了。
上图:红色占20%,蓝色占60%; 都向左浮动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
width: 20%;
background-color: red;
float: left;
}
#i2{
width: 60%;
background-color: cornflowerblue;
float: right;
}
</style>
</head>
<body>
<div id="i1">123</div>
<div id="i2">abc</div>
</body>
</html>
代码:蓝色向右浮动;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
width: 20%;
background-color: red;
float: left;
}
#i2{
width: 80%;
background-color: cornflowerblue;
float: right;
}
</style>
</head>
<body>
<div id="i1">123</div>
<div id="i2">abc</div>
</body>
</html>
代码:蓝色占80%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
width: 20%;
background-color: red;
float: left;
}
#i2{
width: 81%;
background-color: cornflowerblue;
float: right;
}
</style>
</head>
<body>
<div id="i1">123</div>
<div id="i2">abc</div>
</body>
</html>
代码:蓝色占81%
上图:红色20%+蓝色81%,超出100%,就不会再同一行显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
background-color: red;
display: inline;
}
#i2{
background-color: cornflowerblue;
display: inline;
}
</style>
</head>
<body>
<div id="i1">123</div>
<div id="i2">abc</div>
</body>
</html>
代码:display: inline;将块级标签改为行内标签
标签:href 浏览器 效果 背景色 doctype 一起 占用 ted 背景颜色
原文地址:https://blog.51cto.com/daimalaobing/2445603