前端基础知识之CSS初识

    
2.text-indent:用来设置首行缩进的

用法：text-indent：2em;em是一个文本的距离

Text-align:作用这是文本的位置

   取值：center设置文本在容器的水平方向上居中，left设置文本容器的水平方向上靠左

right设置文本在容器的水平方向上靠右

Text-decoration:作用设置文本的装饰比日说a标签的下划线

  取值

none：没有任何装置

2.margin：0 auto;

 

3.CSS的三大特性

  继承性：子元素可以继承父元素的样式

  text-

Font-

Line-开头的属性都是可以继承的

Color

具体应用：在写页面之前我们会用过给body设置一个字体，将来页面的所有的

a标签的颜色不能继承如果一定要修改慧姐作用域a标签上

h标签的大小不能继承如果一定要修改h标签的大小，直接作用于h标签上

div的高度有内容决定如果不设置的话，如果没有内容则高度为0宽度默认继承父元素

1.DocType不是一个标签对于大小写并不是很敏感，

SEO提高网络排名：花钱，写成静态页面，发外链，页面友好化

 

  1.html的空格合并现象：html中对空格缩进换行不敏感，不管将来我们在页面的同一位置上写多少个空格缩进换行，将来浏览器在解析的时候只会当做一个空格来解析。

  解决办法：空格代码的使用 ；

 

2.注意一下把标签之间的关系写的清楚一些

标签之间的关系：嵌套，并列

3.练习各种字符

4.没有语义的标签

Div：特点是单独占一行

         默认占一整行

        将来我们在进行页面布局的时候，用div用的最多div+css

Span：一行里面可以放多个span，

           宽高由里面的内容来决定

 

5.W3C三层分离的标准：

html：从语义的角度来描述页面结构

Css:样式，从样式上来修饰觉够

JS：负责让页面动起来

   html负责页面的语义：

  语义的好处：

 

  1.0让页面更加的友好，SEO就会收录页面更多的信息

2.0让页面的结构更加的清晰，对开发人员友好

3.0对用户体验好。

 

6.Css的初体验：

  CSS中所有与css相关的设置我们都放在了style标签中style标签是一个双标签放在head标签中，再title标签下面

2.0结构

<style>

 选择器{

   属性名：属性值；

}

</style>

 

总结：CSS是用来给页面上的结构进行修饰

2.CSS相关的属性

color：设置字体的颜色

font-size：设置字体的大小

background：设置背景颜色

Width：

height：

img也可以设置宽高

 

3.css层叠样式表cascading style Sheets可以发生相互层叠的样式表

4.与字体相关的属性

  font-size:字体的大小

  font-weight：字体的粗细，可以设置具体的数值取值100-900，还可以设置关键字bold黑体的，normal

Font-family:字体的类型“微软雅黑”

Font-style:字体的样式 normal italic oblique

5,。如何通过浏览器查看页面的样式

 1.0在浏览器右键点击审查元素，

2.0在开发人员工具中选中当前选中标签

3.0查看开发人员右侧的样式部分

 

 

6.字体的连写形式：font：font-style，font-weight，font-size，font-family

Font-style和font-weight是可以有可以没有的但是另外两个必须要有

 

 

 

7.颜色color属性的取值

  1.0具体的颜色的英文单词yellow，pink，red

  2.0使用十六进制颜色表示法

  3.0RGB表示法

  4.0rgba 透明度

 

 

8.

  1.0标签选择器

     结构

  <style>

标签名（选择器）{

 

    属性1：属性值1；

       属性2：属性值2；

 

}

 

</style>

  会将标签的所有的添加相同的样式

 

 2.0类选择器

    class：给要设置的标签添加一个类名

  例如：<p class="zhuiming">追命</p>

 

  结构<style>

.类名{

属性名1：属性值1；

 

 

}

会将所有拥有这个类名的那些标签都加上相同的属性。

 

</style>

3.0id选择器

首先要给标签一个id名

  #id名{

   属性名1：属性值1；

 

}

id的名是唯一的

 

4.0id选择器和类选择器之间的区别

 类名：相当于是人的姓名

id名相当于人的身份证号码

特点：类名可以设置给多个标签

      一个标签可以有多个类名

特点：只能给一个标签设置这个id名

            一个标签里只能有一个id名（是在开发中默认的规则）

 

 

比如说<pclass="colorRed size20">

 

 

 

9.类名与id名的命名规则

     命名的取值范围

 0-9，a-z,A-Z,_,-

 

并且不能以数字开头，可以以下划线和连接符来进行命名。

 

 10其他选择器.

1.0通配符选择器

   *{

 

   }

作用：会将页面上所有的标签都设置这个属性，会去页面上一个一个的遍历标签，然后给他们进行设置（效率非常的低）。

2.0并集选择器

语法：使用逗号将选择器区分开

 

  p,div,.zm{

   color:red;

}

 

3.0交集选择器

   p.zhuiming{

 

}

 

交集选择器在书写的时候如果有标签名则标签名一定要写在最前面。

4.后代选择器

     .father p{

         

     }

他会选择所有的后代不管是儿子还是孙子

5.0子代选择器

  作用：找到一个标签的子代选择器

.father>p{

 

找直接的子元素

}

 

11.注释的作用

  使用注释将页面的结构标注出来

 

注释是不能发生嵌套的

/**/是CSS中的注释也是不能发生嵌套的

CSS代码的存放位置：

  嵌套样式

 行内样式：行内样式多个属性之间使用分号隔开

外联样式：新建一个文件后缀名叫.css在这个文件中直接写样式不需要加上style标签，在另一个页面引用的时候加上

<link rel="stylesheet" href="路径">

 

 

层叠性：浏览器处理冲突的一个特性，如果一个属性通过两个选择器设置到同一个元素上面那么这个时候一个属相会将一个属性层叠掉

如果多个不同的

优先级：

id选择器>类选择器?标签选择器>通配符》继承