CSS3 基础入门

CSS3基础语法

css3 书写位置

  • 内嵌式
    在 <head></head>标签对中,添加<style></style>标签对,然后在里面书写css样式
  • 外链式
    单独创建css文件,在head标签中,通关link引入
  • 导入式
<style>
@import url(css/index.css)
</style>
  • 行内式
<div style='color:red'></div>

基本语法

CSS3选择器

CSS选择器与伪类

标签选择器和id选择器

  1. 标签选择器

    • 标签选择器也称元素选择器、类型选择器,它直接使用元素的标签名当做选择器,将选择页面上所有该种标签
    • 标签选择器将选择页面上所有该种标签,无论这个标签所处位置的深浅
    • 标签选择器“覆盖面”非常大,所以通常用于标签的初始化
  2. ID选择器

    • 标签可以有id属性,是这个标签的唯一标识
    • id的名称只能由字母、数字、下划线、短横构成,且不能以数字开头,字母区分大小写,但习惯上一般为小写字母
    • 同一个页面上不能有相同id的标签
    • CSS选择器可以使用井号#前缀,选择指定id的标签

class选择器

  • class属性表示“类名”
  • 类名的命名规范和id的命名规范相同
  • 使用点前缀选择指定 class的标签
  • 多个标签可以为相同类名
  • 同一个标签可以同时属于多个类,类名用空格隔开
  • ==原子类==:在做网页项目前,可以将所有的常用字号、文字颜色、行高外边距、内边距等都设置为单独的类
.color-ref{
    color:red
}

HTML标签就可以“按需选择”它的类名了,这样可以非常快速的添加一些常见样式

<p class='color-ref'></p>

复合选择器

选择器名称示例示例的意义
后代选择器.box .spec选择类名为box的标签内部的类名为spec的标签
交集选择器li.spec选择既是1i标签,也属于spec类的标签
并集选择器ul,ol选择所有ul和ol标签
  • css选择器中,使用空格表示后代
  • 后代选择器可以有很多空格,隔开好几代
  • "后代”并不一定是“儿子”
  • 并集选择器也叫做分组选择器,逗号表示分组
  • 选择器可以任何搭配、结合,从而形成复合选择器,我们必须要能一目了然的看出选择器代表的含义
ul,ol{
    list-style:none
}

伪类

伪类是添加到选择器的描述性词语,指定要选择的元素的特殊状态,超级链接拥有4个特殊状态:

伪类意义
a:link没有被访问的超级链接
a:visited已经被访问过的超级链接
a:hover正被鼠标悬停的超级链接
a:active正被激活的超级链接(按下按键但是还没有松开按键)

a标签的伪类书写,要按照“爱恨准则”的顺序,否则会有伪类不生效

     LOVE HATE 

CSS3选择器与伪元素

元素关系选择器

选择器名称示例示例的意义
子选择器div>pdiv的子标签p
相邻兄弟选择器img+p图片后面紧跟着的段落将被选中
通用选择器p~spanp元素之后的所有同层级的span元素

序号选择器

举例 | 意义

---|---  

:first-child |第一个子元素
:last-child | 最后一个子元素
:nth-child(3)|第三个子元素
:nth-of-type(3)|第三个某类型子元素
:nth-last-child(3)|倒数第三个子元素

:nth-last-of-child(3)|倒数第三个某类型子元素

属性选择器

我基本不怎么用

css新增伪类

伪类 | 意义

---|---  

:empty | 选择空标签
:focus| 选择当前获得焦点的表单元素
:enabled| 选择当前有效的表单元素
:disabled| 选择当前无效的表单元素
:checked| 选择当前已经勾选的单选按钮或者复选框
:root|选择根元素,即<htm1>标签

    <style>
        input:checked+span{
            color: red;
        }
    </style>
 
<body>
 <input type="checkbox" name="" id="checkbox"><span>123</span>
 <input type="checkbox" name="" id="checkbox"><span>123</span>
 </body>

伪元素

CSs3新增了“伪元素”特性,顾名思义,表示虚拟动态创建的元素
伪元素用双冒号表示,IE8可以兼容单冒号

before after

  • ::before创建一个伪元素,其将成为匹配选中的元素的第一个子元素,必须设置 content属性表示其中的内容
  • ::after创建一个伪元素,其将成为匹配选中的元素的最后一个子元素,必须设置 content属性表示其中的内容

selection

selection css伪元素应用于文档中被用户高亮的部分(
使用鼠标圈选的部分)

first-letter first-line

  • ::first- letter会选中某元素中(必须是块级元素)第-
    行的第一个字母
  • ::first-line会选中某元素中(必须是块级元素)第一行全部文字

层叠性和选择器权重计算

层叠性

多个选择器可以同时作用于同一个标签,效果叠加

层叠性的冲突处理

  • id权重>class权重>标签权重
  • 复杂选择器可以通过(id的个数,class的个数,标签的个数)的形式,计算权重
  • !important 提升权重
p{
    color:red !important
}

文本与字体属性

常用文本样式属性

color

font-size

font-wight

设置字体的粗细程度,通常就用normal(正常粗细 与400等值)和bold(加粗 与700等值)两个值,

font-style

设置字体的倾斜,常用属性值 italic (设置为倾斜字体)

text-decoration

设置文本的修饰线外观的(下划线,删除线)

  • underline 下划线
  • line-through 删除线

字体属性详解

font-family

设置字体

font-family:serif,"Times New Roman","微软雅黑"
// 字体名称中有空格,必须用引号包裹

定义字体

字体文件根据操作系统和浏览器不同,有eot,woff2,woff,ttf,svg文件格式,需要同时有这五种文件

   @font-face {
    font-family: 'YourWebFontName';
    src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
    src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
             url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
   }

段落和行相关属性

text-indent

定义文本内容之前的缩进量,缩进两个字符应该写作

text-indent:2em; 

line-height

定义行高(第一行的字符顶端到下一行字符的顶端的距离)

属性设置

  • px为单位的数值
  • 没有单位的数值 表示字号的倍数
  • 百分数,字号的倍数

单行文本垂直居中

  • 设置行高等于盒子高度,即可实现单行文本垂直居中
  • 设置 text-align:center 即可实现文本水平居中

font合写属性

font:20px Arial 
font:italic bold 20px Arial

文字内容多,省略号

text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;

继承性

  • 文本相关的属性普遍具有继承性,只需要给祖先标签设置,既可在后代所以标签中生效
  • 因为字号相关属性有继承性,所以通常会设置body标签的字号,颜色,行高等,这样就能当作整个网页的默认样式了

就近原则

  • 在继承的情况下,选择器权重计算失效,而是就近原则
<div id='box1'>
<div id='box2'>
<div id='box3'>
<p>我是文字</p>
</div>
</div>
</div>

style:
#box1 #box2 {
    color:red;
}

#box1 #box3 {
    color:green;
}

此时p中的文字是绿色的,这就是就近原则

盒模型

hight和width

  • 当块级元素(div,h,li)没有设置width属性的时候,它将自动撑满,但这并意味着width可以继承
  • 盒子的height属性如果不设置,他将自动被内容撑开,如果没有内容,则height默认为0

padding

内边距
盒子边框内壁到文字的距离

写法

  1. 四数值写法:上 右 下 左
  2. 三数值写法:上 左右 下
  3. 二数值写法:上下 左右

margin

外边距
盒子与盒子之前的距离

margin的塌陷

在垂直方向如果有两个元素的外边距有相遇,在浏览器中加载的真正的外边距不是两个间距的加和,而是两个边距中值比较大的,边距小的塌陷到了边距值大的值内部。

两种情况

  1. 同级元素塌陷:上面的元素有下边距,下面的元素有上边距,两个边距相遇,真正盒子间距离是较大的那个值。

    1. 父子元素塌陷:父子元素之间也会出现margin塌陷,
      (1)父元素和子元素都设置了同方向的margin-top值,两个属性之间没有其他内容进行隔离,导致两个属性相遇,发生margin塌陷。

(2)本身父元素与上一个元素的距离是0,子元素如果设置了垂直方向的上边距,会带着父级元素一起掉下来(父元素的上边距0塌陷到了子元素的上边距50里面)。

解决方法

(1)同级元素:如果两个元素垂直方向有间距,只需要设置给一个元素,不要进行拆分。
(2)父子元素:让两个边距不要相遇,中间可以使用父元素border或padding将边距分隔开;更加常用的方法,父子盒模型之间的距离就不要用子元素的margin去设置,而是用父元素的padding挤出来。给父级元素添加overflow:hidden,也可以解决这个问题
注:水平方向没有margin塌陷。

一些其他解决方案

(1)为父盒子设置border,为外层添加border后父子盒子就不是真正意义上的贴合 (可以设置成透明:border:1px solid transparent)。
(2)为父盒子添加overflow:hidden;
(3)为父盒子设定padding值;
(4)为父盒子添加position:fixed;
(5)为父盒子添加 display:table;
(6)利用伪元素给子元素的前面添加一个空元素

(6)
.son:before{ content:"";
             overflow:hidden; }

默认margin

一些元素(body,ul,p)有默认的margin,开始要清除

*{
    margin:0;
    padding:0;
}

盒子的水平居中

.box{
    margin:0 auto;   
}

margin:0 auto;在不同场景下生效条件

  • 块级元素:给定要居中的块级元素的宽度。
  • 行内元素:①设置display:block;②给定要居中的行内元素的宽度。(行内元素设置成块级元素后可以对其宽高进行设置)
  • 行内块元素:设置display:block。(如input、button、img等元素,自带宽度可以不用设置其宽度)

盒模型计算和box-sizing属性

盒模型种类

  • content-box W3c标准的盒子模型(标准盒模型)
  • border-box IE标准的盒子模型(怪异盒模型)

区别

  • content-box,
    width = 内容的宽度

标准盒模型下盒子的大小 = content + border + padding + margin

  • border-box,
    width = 内容的宽度 + padding + border

怪异盒模型下盒子的大小=width(包含content + border + padding) + margin

总结

  • 标准盒模型在定义width宽度后,后面写padding和border是会改变盒子实际大小。如果需要保持固定大小,需要进行计算。
  • 怪异盒模型在定义width宽度后,不管怎么写padding和border宽度都固定在书写时的width。但是有可能导致内容被压缩,导致布局异常。

box-sizing属性

将盒子添加了box-sizing:border-box之后,盒子的width,height数字就表示盒子实际占有的宽高,即padding,border变为“内缩”,不在“外扩”

行内元素与块级元素

区别

行级元素

  1. 可以和其他元素处于一行,不用必须另起一行。
  2. 元素的高度、宽度及顶部和底部边距不可设置。可以设置margin-left/right
  3. 元素的宽度就是它包含的文字、图片的宽度。

常见的行级元素有:a、input、img、span、strong

块级元素

  1. 每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行。
  2. 元素的高度、宽度、行高和顶底边距都是可以设置的。  
  3. 元素的宽度如果不设置的话,默认为父元素的宽度。

常见的块级元素有div、p、h1...h6、ol、ul、dl、table

行内块

img和表单元素是特殊的行内块,他们既可以设置宽度高度,也能并排显示

相互转换

使用dispaly属性

display:block 
display:inline
dispaly:inline-block

元素的隐藏

  • 使用 display:none;可以将元素隐藏,元素将彻底放弃位置,如同没有写它的标签一样
  • 使用 visibility:hidden;可以也可以将元素隐藏,但是元素不放弃自己的位置
最后修改:2021 年 07 月 28 日 12 : 16 AM