CSS 初步学习（1）

通过标签修改样式的缺点：
1.需要记忆标签和属性，如果该标签没有这个属性，那么设置也没有效果
2.需求变更时，需要修改大量代码才能满足现在的需求
3.HTML只有一个作用就是添加语义
所以在企业开发中，修改样式都是交给CSS来做。

CSS格式：

<style type="text/css">
     标签名称{
           属性名称：属性对应的值；
           ....
     }
</style>

tips:

• style标签必须写在head标签的开始标签和结束标签之间，和title同级
• style中的type属性可以不用写，默认就是type=“text/css”
• 设置样式时必须按照固定的格式来设置，如 key： value：
  其中“：”不能省略，分号大多数情况下也不能省略

1.规定文字样式的属性

格式：

font-style：italic；

取值：

• normal：正常的，默认
• italic：倾斜的
  快捷键：
• fs+table键：font-style：italic；
• fsn+table键：font-style：normal；

2.规定文字粗细的属性

格式：

font-weight：bold；

单词取值：
bold：加粗
bolder：比加粗还要粗
lighter：细线，默认

快捷键：
fw+table键：font-weight：；
fwb：font-weight：bold；
fwbr：font-weight：bolder；

数字取值
100-900之间整百的数字

3.规定文字大小的属性

格式：

font-size：30px；

单位：px（像素 pixel）
tips:

• 通过font-size设置大小一定要带单位，px

快捷键：
fz：font-size
fz30：font-size：30px；

4.规定文字字体的属性

格式：

font-family：“微软雅黑”

注意点：

• 如果取值是中文，需要用双引号或者单引号括起来
• 设置的字体必须是用户电脑里面已经安装的字体

快捷键
ff：font-family

字体属性补充

1.如果设置的字体不存在，那么系统会使用默认的字体来显示：即宋体
2.如果设置的字体不存在，而我们又不想默认的字体来显示怎么办

• 可以给字体设置备选方案
• 格式：
• font-family：“字体一”，“备选方案”；

3.如果想给中文和英文单独设置字体，怎么办？

• 但凡是中文字体，里面都包含了英文
• 但凡英文字体，都不包含中文
  tips：
• 如果想给页面中的英文单独设置字体，那么英文的字体必须写在中文的前面

在企业开发中，最常见的字体有以下几个：
中文：宋体，黑体，微软雅黑
英文字体：times new roman / Arial

并不是名称是英文就一定时英文的字体，因为中文字体都有自己的英文名称，所以判断是否为中文字体看能不能处理中文

文字属性简写

缩写格式：

font：style weight size family；
即    font：italic bold 10px “字体”；

tips：

• 在缩写格式中，有的属性值可以省略，如style，weight。
  style和weight的位置可以交换
• 在缩写格式中，有的属性值不可省略，如size，weight。
  size和family不能省略，也不能交换
  并且必须写在最后

文本属性

1.文本装饰属性
格式：

text-decoration：取值；

取值：

• underline 下划线
• overline：上划线
• line-through：删除线
• none：什么都没有，最常见的用途为去掉超链接的下划线

快捷键：
td：text-decoration：none；
tdu，tdo，tdl

2.文本水平对齐属性
格式：

text-align：”取值“；

取值：left，right，center
快捷键：tal（默认） tar tac

3.文本缩进属性
格式:

text-indent:"取值"；

取值：如2em（em是单位，一个em代表缩进一个字符的宽度）
快捷键：ti2e 即text-indent：2em；

颜色控制属性（了解）

格式：

color：颜色；

1.在CSS中如何通过color属性来修改文字颜色
取值：

• 英文单词
  一般情况下常见的颜色都有对应的英文单词，但英文单词能够表达的颜色是有限制的，并不是所有的颜色都能用英文单词表达

• rgb
  三原色
  格式：rgb（0，0，0）
  1.格式中的第一个数字就是用来设置三原色的光源元件红色显示的亮度，第二个数字用来设置绿色显示的亮度，第三个数字用来设置蓝色显示的亮度
  2.每一个数字的取值是0-255，0代表不发光，255代表发光，值越大就越亮
  3.黑色是都不发光，白色是都发光
  4.在前端开发中并不常用黑色，而是灰色。只要让红，绿，蓝的值都是一样就是灰色的，而且如果这个值越小那么越偏黑色，值越大就越偏白色

• rgba
  rgba中的rgb和rgb一样，只不过多了个a
  a代表透明度，取值为0-1，取值越小越透明

• 十六进制
  在前端开发中，通过十六进制表示颜色，本质就是RGB
  十六进制通过每两位表示一个颜色

• 十六进制缩写
  十六进制的颜色的两位数值是一样的，就可以简写为一位

十六进制：一种计数方式，取值范围0-F,逢16进一
第一位*16+第二位就是十进制数

tips：

• 如果当前颜色对应的两位数值不一样，就不能简写
• 如果两位相同的数字不是属于同一个颜色，也不能简写

选择器

标签选择器

作用：根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性
tips：

• 1.标签选择器选中的是当前界面中所有的标签，而不能单独选中某一个标签
• 2.标签选择器无论标签藏得多深都能被选中
• 3.只要是HTML中的标签，就可以作为标签选择器

id选择器

作用：根据指定的ID名称找到对应的标签，然后设置属性
格式：

#id名称{
     属性：值；
 }

tips：

• 每个html标签都有一个属性叫做id，也就是说每个标签都可以设置id
• 在同一个界面中id的名称是不可以重复的
• 在编写id选择器时，一定要在id名称前加上#，否则无效
• id的名称有一定的规范
  1.只能由字母/数字/下划线组成
  2.id名称不能以数字开头否则无效
  3.id名称不能是HTML标签的名称
  4.在企业开发中，一般情况下如果仅仅是为了设置样式，不会使用id，因为在前端开发中是留给js使用的

类选择器

作用：根据指定的类名称找到对应的标签，然后设置属性
格式：

.类名{
    属性：值；
}

tips：

• 每个html标签都有一个属性叫做class，也就是说每个标签都可以设置类名
• 在同一个界面中class的名称是可以重复的
• 在编写class选择器时，一定要在class名称前加上"."，否则无效
• 类名的命名规范和id名称的规范一致
  1.只能由字母/数字/下划线组成
  2.类名称不能以数字开头否则无效
  3.类名称不能是HTML标签的名称
• 类名就是专门用来给某个特定的标签设置样式的
• 在html中，每一个标签可以同时绑定多个类名

<标签名称 class=”类名一 类名二 ...“>

总结
id和class有何区别
1.id相当于人的身份作证不可重复，class相当于人的名称可以重复
2.一个html标签只能绑定一个id名称，可以绑定多个class名称

id选择器和class选择器有何区别：
id选择器以#开头，class选择器以.开头

在企业开发中到底用id还是class选择器？
id一般情况下是给js用的，除非特殊情况，否则不要使用id去设置样式

在企业开发中，开发人员对类的使用可以看出开发人员的技术水平，要注重冗余代码的抽取，可以将一些公共的代码抽取到一个类选择器中即可

后代选择器

作用：找到指定标签的所有后代标签，设置属性
格式：

标签名称1 标签名称2{
    属性：值；
}

先找到名称叫做标签名称1的标签，然后再给这个标签下面去查找所有名称叫做标签名称2的标签，然后设置属性

tips：

• 后代选择器必须用空格隔开
• 只要是最终放到指定标签中的都是后代
• 后代选择器不仅仅可以使用标签名称，还可以使用其他选择器
• 可以用空格无限选择后代，可以通过空格一直延续下去

子元素选择器

作用：找到指定标签中所有的直接子元素，然后设置属性
格式：

标签名称1>标签名称2{
     属性：值；
}

先找到名称为”标签名称1“的标签，然后在这个标签中查找所有的直接子元素名称叫做“标签名称2”的元素

tips：

• 子元素选择器只会查找儿子，不会查找其他被嵌套的标签
• 子元素选择器之间需要用>连接，并且不能有空格
• 子元素选择器不仅仅可以使用标签名称，还可以使用其他选择器
• 子元素选择器可以通过>一直延续下去

总结
后代选择器和子元素选择器之间的区别
1.后代选择器用空格作为连接符号；子元素选择器使用>作为连接符号
2.后代选择器会选中指定标签中所有的特定后代标签；子元素选择器只会选择指定标签中所有特定的直接标签。（企业开发中的选择依据）

后代选择器和子元素选择器之间的共同点
1.都可以使用标签名称/id名称/class名称作为选择器
2.都可以通过各自指定连接符号一直延续下去

交集选择器

作用：给所有选择器选中的标签中，相交的那部分标签设置属性
格式：

选择器1选择器2{
   属性：值；
}

tips：

• 选择器和选择器之间没有任何的连接符号
• 选择器可以使用标签名称/id名称/class名称
• 交集选择器仅作为了解，企业开发中并不常用

并集选择器

作用：给所有选择器选中的标签设置属性
格式：

选择器1，选择器2{
     属性：值；
}

tips：

• 并集选择器必须使用，来连接

兄弟选择器

1.相邻兄弟选择器（CSS2）
作用：给指定选择器后面紧跟的那个选择器选中的标签设置属性
格式：

选择器1+选择器2{
    属性：值；
}

tips：

• 相邻兄弟选择器必须通过+连接
• 只能选择紧跟其后的那个标签，不能选择被隔开的标签

2.通用兄弟选择器(CSS3)
作用：给指定选择器后面的所有选择器选中的所有标签设置属性
格式：

选择器1~选择器2{
     属性：值；
}

tips：

• 必须用~连接
• 通用兄弟选择器选中的是指定选择器后面的某个选择器

序选择器

CSS3中新增的选择器最具代表性的就是序选择器
1.同级别的第几个
：first-child 选中同级别的第一个
：last-child选出同级别中的最后一个标签
：nth-child（n）选中同级别中的第n个标签
：only-child 选中父元素中唯一的子元素
tips：

• 不区分类型

2.同类型的第几个
：first-of-type 选出同级别中同类型的第一个标签
：last-of-type 选出同级别同类型中的最后一个标签
：nth-of-type（n）选中同级别中同类型的第n个标签
：nth-last-of-type（n）选出同级别中同类型的倒数第几个
：only-of-type 选中父元素中唯一类型的某个元素

属性选择器（课程78 79）

作用：根据指定的属性名称找到对应的标签，然后设置属性
格式：

【attribute】
作用：根据指定的属性名称找到对应的标签，然后设置属性
例：p[id]
即p标签中所有带有id属性的
【attribute=value】
作用：找到有指定属性，并且属性的取值等于value的标签
最常见的应用场景为区分input属性
例：p【class=cc】

1.属性的取值是以什么开头的
【attribute|=value】（CSS2）
【attribute~=value】(CSS3)

• 区别：前者只能找到value开头的，并且value是被-和其他内容隔开的。后者只要是以value开头的都能被找到

2.属性的取值是以什么结尾的
【attribute$=value】(CSS3)
3.属性的取值是否包含某个固定的取值的
【attribute~=value】(CSS2)
【attribute*=value】(CSS3)

• 区别：css2中的只能找到独立的单词也就是包含value并且value是被空格隔开的。css3中的只要包含value就能找到。

重点掌握css3的

通配符选择器

作用：给当前界面上所有的标签设置属性
格式：

*{
    属性：值；
 }

tips：

• 由于通配符选择器是设置界面上所有的标签属性，所以在设置之前回遍历所有的标签，如果当前页面的标签比较多，那么性能会比较差，所以在企业开发中一般不会使用通配符选择器。