标签:设置 col doctype 自己的 red charset 继承性 set xxx
定义:就是给网页中的内容设置样式:样式表、级联样式表、层叠样式表
书写代码的步骤:
1、css代码要写在style标签中
2、style标签放在head中间的最后位置(title标签的下面)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*px作为单位像素点*/
div{width: 100px;height: 100px;background: red;}
</style>
</head>
<body>
<div>nihao</div>
</body>
</html>
注意:px是像素单位
选择器定义:在页面中查找元素、标签、标记的方法
标签选择器:只需要写要找的标签名字即可
例:h1{}
给标签设置id属性,在css代码中使用#id属性值的方式来寻找页面中的元素、标签、标记
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{background: red;}
#div2{background: green;}
#div3{background: yellow;}
</style>
</head>
<body>
<div id="div1">我是div1</div>
<div id="div2">我是div2</div>
<div id="div3">我是div3</div>
</body>
</html>
注:id的命名规则,不允许使用数字开头、不允许使用中文、不允许使用除了中划线- 和下划线_
给标签设置class属性,在css中设置 .class名字:
例:
.div{}
<div class="mmm1 mmm2">XXX</div>
细节:
1、id命名不能冲突
2、id命名不能一个标签设置多个
3、class命名可以冲突
4、class命名还可以给一个标签设置多个
注意:不管是id还是class命名规则一致2
给祖先元素设置的样式,可以继承给儿孙元素,如果儿孙元素有自己的样式,那么一定是听儿孙元素自己的(继承的样式,权重较低!)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*文字颜色:color*/
/*继承性*/
div{color: red;}
span{color: yellow;}
/*继承所占的权重较低,小标签可以执行,可以不执行*/
</style>
</head>
<body>
<div>
<span>
hello
</span>
</div>
</body>
</html>
先写的代码会被后写的代码覆盖,代码的运行是由上而下
注意:需要在在权重相同的前提
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{color: red;}
span{color: yellow;}
</style>
</head>
<body>
<span>hello</span>
</body>
</html>
标签:设置 col doctype 自己的 red charset 继承性 set xxx
原文地址:https://www.cnblogs.com/justztz/p/12044374.html