注释:被注释掉的部分代码浏览器是识别不了的。
注释的功能:
1.用来写备注
<!--注释的内容-->
快捷键Ctrl+?可以直接注释
2.可以用来调bug,用注释排除法判断哪行代码出错。
要清楚,web前端中html负责结构,css负责样式,javascript(js)负责行为
CSS(cascading style sheet-层叠样式表)
-
引入CSS
第一种,行间样式,用<div></div>举例
在div的头加一个属性叫style然后加一个等号和””中间填写的就是css代码了
<div style=""></div>
-
页面级css
依旧div举例
这个时候,不在标签头写,而在<head></head>中间写<style></style>标签
<style>标签是双标签。其中属性type是告诉浏览器,中间写的是css代码
这个属性可以不写。
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>调查</title>
<!--<style type=”css”></style>-->
<style>
<!--填写css代码-->
</style>
</head>
<body>
<H2>
您的性别是
</H2>
<div></div>
</body>
</html>
````
-
外部css文件(最实用的)
单纯写一个文件,后缀.css,在这里写相关css代码,然后在head标签中写一个link单标签
<link rel=”stylesheet” type=”text/css” href=”填写css所在文件路径”>
这样,刚才写的css文件就会被调用到这个网页。
网页写好了别人怎么看见呢,
我们写的css,js,html文件要放到服务器中,这个服务器有地址,方便别人找到,比如192.168.000.001(物理地址)
平常见的是www.baidu.com,这个叫域名,他俩的关系就是
www.baidu.com--dns---192.168.000.001
通过dns将域名解析到192.168.000.001。
浏览器通过访问对应文件下载在浏览器中,呈现在浏览器中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>调查</title>
<link rel=”stylesheet” type=”text/css” href=”填写css所在文件路径”>
</head>
<body>
<H2>
您的性别是
</H2>
<div></div>
</body>
</html>
-
选择器:css如何选择HTML中的元素
1.1 id选择器
在html元素头上加id=”这里是名字” 名字随意
例
<div id=”name”>124</div>
这时候这个元素就有了id
Css id选择器写法
#id值 这里是name,然后后面加{},花括号中间加css代码
#name{
background-color: red;
<!--css代码-->
}
Id选择器特点:一个元素只能有一个id值,一一对应。
说白了id就像人的身份证,一个人只能有一张。
1.2class选择器
<div class=”name1”></div>
在元素中添加class,添加一个名
Class选择器Css写法
.class名
.name1{
<!--css代码-->
}
Class和元素是多对多的关系,一个元素可以有好几个class,一个class可以被好几个元素使用。
一个元素加多个class只需在Cass名后面空格再写一个Class名
<div class="name1 name2"></div>
.name1{
<!--一个css代码-->
}
.name2{
<!--另一个css代码-->
}
这样这个div就能被两个css修饰了·
1.3标签选择器
Html中不用添加东西
标签选择器css写法
标签名{}
例如
div{
<!--css代码-->
}
这时,html中所有的的div都会被修饰
1.4通配符选择器
所有的标签都是这个css装饰类似全选(全局)
通配符选择器css写法
*{
<!--css代码-->
}
选择器中id优先级高,然后是class,再就是标签,通配符
行间样式大于id选择器
1.5属性选择器
<div class="name1 name2"></div>
其中class叫属性名
属性选择器就是通过属性来选择,
Css写法
[属性名或属性名加值] {
<!--css代码-->
}
理解同上。
[class或class=”name”] {
<!--css代码-->
}
Class选择器和属性选择器优先级相同
优先级总结
行间样式>id>class=属性>标签>通配符
在属性值后面加!important优先级最高
Css权重
!important infinity()
行间样式 1000
Id 100
Class|属性|伪类 10
标签|伪类 1
通配符 0
其中的1000 100是256进制