CSS学习笔记(1)

发表于 更新于 分类于
css学习笔记

CSS简介

语法规范

使用HTML时,需要遵从一定的规范,CSS也是如此。要想熟练地使用CSS对网页进行修饰,首先需要了解CSS样式规则
CSS规则由两个主要的部分构成:选择器以及一条或多条声明

  • 选择器是用于指定CSS样式的HTML标签,花括号内是对该对象设置的具体样式
  • 属性和属性值以“键值对“的形式出现
  • 属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等
  • 属性和属性值之间用英文:分开
  • 多个“键值对”之间用英文;进行区分

空格规范

h3 {
	color: pink;
}
  • 属性值前面,冒号后面,保留一个空格
  • 选择器(标签)和大括号中间保留空格

基础选择器

标签选择器

标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式

标签名 {
    属性1: 属性值1;
	属性2: 属性值2;
	属性3: 属性值3
}

优点：能快速为页面中同类型的标签统一设置样式

缺点：不能设计差异化样式，只能选择全部的当前标签

类选择器

(开发最常用)

定义与使用

如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器

类选择器在HTML中以class属性表示,在CSS中,类选择器以一个点“号显示。

<!--类的定义 -->

.类名 {
	属性1: 属性值1;
    ...
}
  1. 类选择器使用“(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)。
  2. 可以理解为给这个标签起了一个名字,来表示
  3. 长名称或词组可以使用中横纬来为选择器命名。
  4. 不要使用纯数字、中文等命名,尽量使用英文字母来表示
  5. 命名要有意义,尽量使别人一眼就知道这个类名的目的
  6. 命名规范:见附件(Web前端开发规范手册,doc)
<!--类的引用-->

<div class=red>类</div>

多类名使用

< div class=" red font20">亚瑟</div>
  1. 在标签class属性中写多个类名
  2. 多个类名中间必须用空格分开

id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS中id选择器以“#”来定义。

#id名{
    属性1: 属性值1;
    ...
}

id属性只能在每个html文档中不能重复

id选择器和类选择器区别：id的使用元素是唯一的，类可以被多个元素同时使用

通配符选择器

在CSS中,通配符选择器使用“*定义,它表示选取页面中所有元素(标签)。

* {
    属性1:属性值1;
    ...
}

  • 通配符选择器不需要调用,自动就给所有的元素使用样式

  • 特殊情况下才会使用

CSS字体属性

字体系列

CSS使用font-family属性定义文本的字体系列。

p {font- family:"微软雅黑";}
div {font- family:arial,"Microsoft yahei","微软雅黑";}
  • 各种字体之间必须使用英文状态下的逗号隔开 浏览器对规定多种字体的处理方法是以第一个能够正常显示的字体为准
  • 一般情况下如果有空格隔开的多个单词组成的字体加引号.
  • 尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
  • 最常见的几个字体:body{font- family.:”Microsoft yahei”; tahoma, arial,” Hiragino Sans GB’;}

字体大小

p {
    font-size: 120px;
}
  • px(像素)大小是我们网页的最常用的单位
  • 谷歌浏览器默认的文字大小为16pX
  • 不同浏览器可能默认显示的字号大小不一致,我们尽量给个明确值大小,不要默认大小
  • 可以给body指定整个页面文字的大小
  • 标题标签比较特殊，需要单独指定大小（不包含在body内）

字体粗细

p {
    font-weight: 400;
}

font-weight

字体样式

p {
    font-style: italic;
}

font-style

平时很少用到斜体效果，反而要把斜体改为不倾斜的

字体复合属性

body {
    font: [font-style] [font-weight] [font-size/line-height] [font-family]
}
  • 使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开
  • 不需要设置的属性可以省略(取默认值),但必须保留font-size和font- family属性,否则font属性将不起作用

CSS文本属性

文本颜色

div {
    color: red;
}

word color

通常十六进制最常使用

对齐文本

div {
    text-align: center;
}
属性值 解释
left 左对齐（默认）
right 右对齐
center 居中

装饰文本

div {
    text-docoration: underline;
}
属性值 解释
none 默认。没有装饰线
underline 下划线
overline 上划线
line-through 删除线

文本缩进

div {
    text-indent: 10px;   /*缩进距离也可以为负值*/
}
div {
    text-indent: 2em;   /*缩进距离也可以为负值*/
}

em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果没有设置当前元素的大小，则会按照父元素的一个文字大小。

行间距

p {
    line-height: 26px;
}

行间距由上间距，文本高度和下间距三部分构成（如果增加行间距则由上间距和下间距平均分配）

CSS引入方式

内部样式表

内部样式表(内嵌样式表)是写到html页面内部.是将所有的CSS代码抽取出来,单独放到一个<style>标签中。

<style>
div {
    color: red;
    font-size: 12px;
}
</style>
  • <style>标签理论上可以放在HTML文栏的任何地方,但一般会放在文档的<head>标签中
  • 通过此种方式,可以方便控制当前整个页面中的元素样式设置
  • 代码结构清晰,但是并没有实现结构与样式完全分离
  • 使用内部样式表设定CSS,通常也被称为嵌入式引入,这种方式是我们练习时常用的方式

行内样式表

行内样式表(内联样式表)是在元素标签内部的style属性中设定CSS样式。适合于修改简单样式

<p style="color: red; font-size: 12px;">哈哈哈</p>
  • style其实就是标签的属性
  • 在双引号中间,写法要符合CSS规范
  • 可以控制当前的标签设置样式
  • 由于书写繁琐,并且没有体现出结构与样式相分离的思想,所以不推荐大量使用,只有对当前元素添加简单样式的时候,可以考虑使用
  • 使用行内样式表设定CSS,通常也被称为行内式引入

外部样式表

实际开发都是外部样式表适合于样式比较多的情况核心是样式单独写到CSS文件中,之后把CSS文件引入到HTML页面中使用

引入步骤：

  1. 先新建一个css文件

  2. 在html页面中使用<link>标签引入文件

    <link rel="stylesheet" href="css文件路径">
    属性 作用
    rel relationship 定义当前文档与被链接文档之间的关系,在这里需要指定为”stylesheet”,表示被链接的文档是一个样式表文件
    href 定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径

    为开发中最常用引入方式

Emmet语法

快速生成HTML结构语法

  1. 生成标签直接输入标签名按tab键即可比如dⅳ然后tab键,就可以生成<div></div>
  2. 如果想要生成多个相同标签加上*就可以了比如div*3就可以快速生成3个d
  3. 如果有父子级关系的标签,可以用>比如ul>li就可以了
  4. 如果有兄弟关系的标签,用+就可以了比如div+p
  5. 如果生成带有类名或者id名字的,直接写.demo或者#two tab键就可以了
  6. 如果生成的div类名是有顺序的,可以用自增符号$
  7. 如果想要在生成的标签里面生成文字，则可以使用{}

快速生成css结构语法

打出键名首字母和键值后按tab即可快速生成。

复合选择器

后代选择器（重要）

后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在
后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。

元素1 元素2 {样式声明}  /*表示选择元素一里面所有元素二*/
ul li {元素声明}   /*选择ul里面所有的li标签元素*/
  • 元素1和元素2中间用空格隔开
  • 元素1是父级,元素2是子级,最终选择的是元素
  • 元素2可以是儿子,也可以是孙子等,只要是元素1的后代即可
  • 元素1和元素2可以是任意基础选择器

子选择器(重要)

子元素选择器(孑选择器)只能选择作为某元素的最近一级子元素。

元素1>元素2{样式声明}

例：

div>p {样式声明}
  • 最终选择元素2
  • 元素1和元素2中间用大于号隔开

并集选择器(重要)

并集选择器可以选择多组标签同时为他们定义相同的样式。通常用于集体声明
并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的部分。

  • 元素1和元素2中间用逗号隔开

  • 逗号可以理解为和的意思

  • 并集选择器通常用于集体声明

ul,li,div {样式声明}

注意最后一个选择器的后面不需要加逗号

伪类选择器

链接伪类选择器

a:link   /*选择所有未被访问的链接*/
a:visited   /*选择所有已被访问的链接*/
a:hover   /*选择鼠标指针位于其上的链接*/
a:active /*选择活动链接（鼠标按下未弹起的链接）*/
  1. 为了确保生效,请按照LVHA的循顺序声明:ink :visited :hover :active。否则无法生效
  2. 因为a链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式

focus伪类选择器

选择获得光标的表单。一般能提供focus的只有表单元素，因此该选择器和表单有关。

input:focus {
    background-color: pink;
}

元素显示模式

作用:网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页。
元素显示模式就是元素(标签)以什么方式进行显示,比如<div>自己占一行,比如行可以放多个<span>

HTML元素一般分为块元素和行内元素

块元素

常见的块元素有<h1>~<h6>、<p>、<diⅳ>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素。

  • 比较霸道,自己独占一行。
  • 高度,宽度、外边距以及内边距都可以控制。
  • 宽度默认是容器(父级完度)的100%。
  • 是一个容器及盒子,里面可以放行内或者块级元素

注意

  • 文字类的元素内不能使用块级元素
  • <p>标签主要用于存放文字,因此<p>里面不能放块级元素,特别是不能放<div>
  • 同理,<h1>~<h6>等都是文字类块级标签,里面也不能放其他块级元素

行内元素

常见的行内元素有<a>、< strong>、<b>、<em>、si、<de>、<s>、<ins>、<span>等,其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素特点：

  1. 相邻行内元素在一行上,一行可以显示多个
  2. 高、宽直接设置是无效的。
  3. 默认宽度就是它本身内容的宽度
  4. 行内元素只能容纳文本或其他行内元素。

注意

  • 链接里面不能再放链接
  • 特殊情况链接<a>里面可以放块级元素,但是给<a>转换一下块级模式最安全

行块内元素

在行内元素中有几个特殊的标签—<img/>、< input/>、<td>,它们同时具有块元素和行内元素的特点
有些资料称它们为行内块元素
行内块元素的特点:

  1. 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)
  2. 默认宽度就是它本身内容的完度(行内元素特点)。
  3. 高度,行高、外边距以及内边距都可以控制(块级元素特点)。

元素显示模式转换

转换为块级元素 display: block
转换为行内元素 display: inline
转换为行内块元素 display: inline-block

单行文字垂直居中方法：令文字的行高等于盒子的高度

若行高大于盒子高度，则文字偏下

若行高小于盒子高度，则文字偏上

CSS背景

背景颜色

background-color: #fff;

背景图片

background- Image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置(精灵图也是一种运用场景）

background-image: none/url(url)
参数值 作用
none 无背景图（默认）
url 使用绝对或相对地址指定图像

背景平铺

background-repeat: no-repeat;
参数值 作用
repeat 纵向和横向都平铺（默认）
no-repeat 不平铺
repeat-x 横向平铺
repeat-y 纵向平铺

背景颜色和背景图片可以同时存在，但背景颜色在底部

背景图片位置

background-position:x y;

方位名词

left top right 等

  • 如果指定的两个值都是方位名词,则两个值前后顺序无关,比如 left top和 top left效果一致
  • 如果只指定了—个方位名词,另一个值省略,则第二个值默认居中对齐

精确单位

  • 如果参数值是精确坐标,那么第一个肯定是ⅹ坐标,第二个一定是y坐标
  • 如果只指定一个数值,那该数值定是ⅹ坐标,另一个默认垂直居中

混合单位

第一个值一定为x，第二个一定为y

背景图像固定

background-attachment: scroll/fixed  /*对内容滚动/固定*/

背景复合写法

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置 /*顺序可以随意，此为一般顺序*/

背景色半透明

background: rgba(0,0,0,0.3)

最后一个参数为alpha值，取值范围0~1（实际开发中可省略小数的0，即0.3记为.3)

CSS三大特性

层叠性

相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层疊性主要解决样式冲突
的问题
层叠性原则：

  • 样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式
  • 样式不冲突,不会层叠

继承性

子标签会继承父标签的某些样式,如文本颜色和字号。简单的理解就是:子承父业。

  • 恰当地使用继承可以简化代码,降低CSS样式的复杂性
  • 子元素可以继承父元素的特定样式(text-,font,line这些元素开头的可以继承,以及color属性，并不会继承父元素的所有属性）

行高的继承性

body {
    font: 12px/1.5 Microsoft YaHei ;
}
  • 行高可以跟单位也可以不跟单位
  • 如果子元素没有设置行高，则会继承行高为文字大小的1.5倍
  • 此时子元素的行高是:当前子元素的文字大小*15
  • body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

优先级

当同一个元素指定多个选择器,就会有优先级的产生

  • 选择器相同,则执行层叠性
  • 选择器不同,则根据选择器权重执行

选择器优先级

div {
    color: #000!mportant;
}

优先级注意点

  1. 权重是有4组数字组成但是不会有进位
  2. 可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器以此类推
  3. 等级判断从左向右,如果某一位数值相同,则判断下一位数值。
  4. 可以简单记忆法:通配符和继承权重为0,标签选择器为1,类伪类)选择器为10,id选择器100,行内样式表为1000,!important无穷大
  5. 继承的权重是0,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是0。
/*第五注意点的例子*/
<body>
        <a href="#"></a>
</body>
<a>即使在body里面，如果不对<a>单独制定样式，<a>也不会继承body的样式，是因为浏览器默认对<a>用元素选择器直接指定了样式，优先级大于继承。

权重叠加

如果是复合选择器，则会有权重叠加，需要计算

每个逗号的得数独立相加，没有进位

盒子模型