李洪强和你一起学习前端之(5)css书写位置 优先级和伪类

时间:2021-07-20 20:58:08

亲爱的,时间过得真快,不知不觉我们一起学习前端已经4天了,这4天的时间里,我们是不是收获很大呢,每当我们学习一个新的知识点的时候,每当我们做出一个新的东西来的时候,我们是不是欣喜若狂,世界从来否不会辜负努力的人,每一步都算数,做iOS开发的我,我也能证明自己可以做前端,最近公司让我做前端的页面,一开始是恐惧的,这个我怎么会,但是谁都不是一开始天生就会前端的,这几天我一直没有休息好,前天晚上,为了学习前端,我一直到凌晨的三点点才睡,加上最近一直以来睡不好就头疼的毛病,真的让我吃不消,没有休息好的情况下,昨天上班,真的很累,昨晚上一直学习到凌晨,还好睡了个好觉,现在感觉好多了,我相信: 明天的你,一定会感谢今天努力的你

下面开始今天的学习吧!

1 复习昨天的知识

概念: 层叠样式表或者叫级联样式表

内嵌式写法:

<head>

  <style  type = "text/css"></style>

</head>

语法:

选择器: {属性:值;}

选择器就是选择标签的一个过程

属性:        赋值       描述

color       Color: red;            文字颜色 

Font-size     Font-size:20px;   文字大小

Font-family           font-family:宋体;  文字字体

Font-weight     Font-weight:bold(700)| normal;  文字加粗

Font-style     Font-style:italic | normal;   文字斜体(italic)

Background-color Backgroundcolor: red;  背景颜色

Width/height    Width: 12px;      宽度和高度

Text-align      Text-align:center;    文字居中

Text-indent    Text-indent:2em;    首行缩进

Margin       Margin:0 auto      盒子居中显示

1.1基础选择器

1.1.1标签选择器

  P{属性:值;}

类选择器

  定义:

  .fontcolor{color:red}//一定要前面的点写上

  调用:

  <p  class = "fontcolor">文字</p>

  特点:

  ->谁调用,谁改变

  ->一个标签可以同时调用多个类样式

  ->多个标签可以同时调用一个类样式

  命名规范:

  -> 不推荐使用汉字定义类名

  -> 不推荐使用标签名或者属性名定义类名

  -> 不能使用纯数字或者特殊字符("_"除外)定义类名

1.1.2id选择器

  定义:

  #自定义名称{属性: 值;}

  调用:

  标签通过 id = "自定义名称"

  注意:

  页面中的表id名称不能重复

  同一个标签不能调用多个id样式

1.1.3通配符选择器

  *{属性: 值;}

  将页面中所有的标签都选中

1.2符合选择器

  1.2.1标签指定式选择器

    p.类选择器{属性: 值}

    既...又(既是...又是标签)

  1.2.2后代选择器

    选择器   选择器{属性: 值}

  //注意: 选择器和选择器之间有空格

    标签之间的关系属于嵌套关系,

  1.2.3并集选择器

    选择器,选择器,选择器{属性: 值}

    是并列的关系

  p,div{

  color: red

  }    

注意: 标签之间不一定是并列关系! ! ! !

复习一下标签

   属性         赋值   描述
color Color:red 设置文字颜色
Font-size Font-size:20px 设置文字大小
Font-family Font-family:宋体 设置文字字体
Font-weight Font-weight: 数字/bold(700以上) normal 设置文字加粗
Font-style Font-style:italic/normal 设置文字斜体
background-color background-color:red 设置背景颜色
width/height width:12px 宽度和高度
Text-align Text-align:center 设置文字居中
align:(html的写法) align = @"center" 设置表格居中
Text-indent Text-indent:2em 设置首行缩进
Margin Margin:0auto 让盒子居中显示  

今天新的内容

2 Css书写位置介绍

2.1 内嵌式写法

2.2外联式写法(通过link标签)

html: 结构

css: 结构

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

  新建一个文件,后缀名以.css命名(css文件)

  在html页面中通过

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

标签将css文件引入

李洪强和你一起学习前端之(5)css书写位置 优先级和伪类

2.3行内式写法

  通过给标签设置style属性来设置样式

  最后一个样式后面可以加也可以不加";"

李洪强和你一起学习前端之(5)css书写位置 优先级和伪类  

还有没有其他的方法?

2.4Css书写方式之间的区别

内嵌式写法:

  代码维护性比较差,没有实现css代码与html结构的完全分离

  影响的范围只有当前页面

行内式写法:   

  代码可以维护性极差,css代码和html结构没有实现分离(写后台的程序的可能会这样写)

  影响的范围只有当前标签

外联式写法:

  代码可维护性高,css与html结构完全分离

  影响范围广,当前整个网页站点

3  HTML标签的分类

根据显示方式不同进行的分类

3.1块级元素(有宽度,有高度)

典型代表

  div,p,li,h,l...

特点:

(1)  元素自己独占一行显示(与宽度无关)

(2) 可以设置宽度和高度

(3) 当嵌套一个块级元素,子元素如果不设置宽度,那么该子元素的宽度为父元素的宽度

 

3.2行内元素

  典型代表

  Span,a,font,strong

  特点:

  元素在一行上显示

  行内元素不能直接设置宽度和高度

3.3行内块元素

典型代表: image,input(表单控件)

特点:

(1)元素在一行上显示

(2)可以设置宽度和高度

3.4元素之间的转换

  Display:inline    将元素转化为行内元素

  Display: inline-block  将元素转化为行内块元素

  DIsplay:block    将元素转化为块元素

李洪强和你一起学习前端之(5)css书写位置 优先级和伪类  

4 Css特性

4.1层特性

  样式的覆盖.样式的层叠性与样式的调用顺序没有关系,与样式的定义顺序有关

层叠性发生的前提: 样式冲突

李洪强和你一起学习前端之(5)css书写位置 优先级和伪类

4.2继承性

  继承性发生的前提是标签之间属于一种嵌套关系

  文字颜色可以实现继承

  文字大小可以实现继承

  字体可以实现继承

  行高可以实现继承

总结: 与文字有关的属性都可以实现继承

  特殊性:

  <a href = "#"></a> 不能继承父元素中的文字颜色(层叠掉了)

  <h1></h1>  标题标签不能继承父元素中的文字大小

  

4.3优先级

默认样式 < 标签选择器 < 类选择器 < id选择器 < 行内样式

< !important

0    1    10    100    1000   

 1000以上

4.3.1优先级的特点

  继承的权重为0

4.3.2权重会叠加

5 伪类介绍

a:link{

属性: 值

}

  超链接默认状态下的样式

  a{

  }与

  a:link{

  } 实现的效果是一样的

  a:link{

  属性: 值;

  }

  超链接访问过后的样式

  a:visited{

  属性:值;

  }

  鼠标放在超链接上的样式

  a:hover{

  }

  超链接激活状态下的样式(点住不放的颜色)

  a:active{

  }

  

  获取焦点(光标)的时候的样式(跟表单控件配合使用)

  a:focus{

  }

注意: 以上几个属性必须按照此顺序来写,否则的话设置之后没有效果!

李洪强和你一起学习前端之(5)css书写位置 优先级和伪类

补充属性:(设置超链接下面的横线)

text-decoration

        None: 不显示下横线

        underline: 显示下横线

        line-through: 贯穿线

6 背景(background)

6.1 Background-color

  背景颜色

6.2 background-image(背景图片)

注意: 设置背景图片的时候一定要设置宽度和高度

李洪强和你一起学习前端之(5)css书写位置 优先级和伪类

6.3 background-repeat  设置背景平铺

  repeat (默认值)

  no-repeat (不平铺)

  repeat-x (横向平铺)

  repeat-y (纵向平铺)

6.4background-position (设置背景位置)

  设置具体指: left|right|top|bottom|cneter

设置居中:

李洪强和你一起学习前端之(5)css书写位置 优先级和伪类

设置具体值的时候不区分先后顺序

李洪强和你一起学习前端之(5)css书写位置 优先级和伪类

设置具体数字的时候,第一个值代表水平方向,第二个值代表垂直方向

李洪强和你一起学习前端之(5)css书写位置 优先级和伪类

6.5background-attachment (设置背景是否固定)

  Scroll(默认值)滚动

  fixed(图片固定)

李洪强和你一起学习前端之(5)css书写位置 优先级和伪类

背景属性联写:

  没有数量限制和先后顺序限制

李洪强和你一起学习前端之(5)css书写位置 优先级和伪类  

去掉列表前面的显示方式

李洪强和你一起学习前端之(5)css书写位置 优先级和伪类

  今天的学习结束了,别忘了好好练习和吸收!