我的前端学习笔记(四)CSS篇

Meteor 95
摘要:

前端学习笔记四--CSS

 

温馨提示

在编辑器中写中间的字母例如div,然后按Tab键就能直接变成<div></div>

我用的编辑器是sublime Text3

注释:被注释掉的部分代码浏览器是识别不了的。

注释的功能:

1.用来写备注

<!--注释的内容-->

快捷键Ctrl+?可以直接注释

2.可以用来调bug,用注释排除法判断哪行代码出错。

要清楚,web前端中html负责结构,css负责样式,javascript(js)负责行为

CSS(cascading style sheet-层叠样式表)

  1. 引入CSS

第一种,行间样式,用<div></div>举例

在div的头加一个属性叫style然后加一个等号和””中间填写的就是css代码了

<div style=""></div>
  1. 页面级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>
  1. 外部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>
  1. 选择器: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进制

我的前端学习笔记(四)CSS篇

分享