CSS

小火山灰
226 阅读12分钟

本笔记中，标签=元素

选择器

普通选择器

选择器描述
标签名{}选取该标签名的一切元素
.className{}选取class属性值为className的一切元素
#idName{}选取id属性值为idName的唯一元素
选择器1,选择器2,选择器N{}选择器分组:同时选中多个选择器对应的元素
*{}通配选择器:选中网页所有的元素
选择器1选择器2选择器N{}交集（复合）选择器:选中满足多个选择器的元素
祖先元素 后代元素{}后代元素选择器:选中祖先元素的所有指定后代元素，含子孙
父元素>子元素{}子元素选择器:选中父元素的所有指定子元素，含子不含孙，IE6以下浏览器不支持

伪类选择器

  • 选择器:hover{}
    • 鼠标悬浮在该元素上的样式
    • IE6不支持<a>标签以外的标签使用
  • 选择器:active{}
    • 鼠标点击时该元素的样式
    • IE6不支持<a>标签以外的标签使用
  • 选择器:link{}
    • 未被访问过时该元素的样式
    • 一般只能用于<a>超链接标签
  • 选择器:visited{}
    • 访问过后该元素的样式（只能设置字体颜色）
    • 一般只能用于<a>超链接标签
  • 选择器:focus{}
    • 获取焦点时该元素的样式
  • 选择器:before{}
    • 指定元素前该元素的样式
  • 选择器:after{}
    • 指定元素后该元素的样式
    • IE6不支持
  • 选择器::selection{}
    • 注意双冒号
  • 选择器::-moz-selection{}
    • FireFox专用
    • 为被选中的内容设置样式
  • 选择器:first-letter{}
    • 标签内容首字母的样式
    • 注意:不是下划线
  • 选择器:first-line{}
    • 标签内容首行的样式
  • 选择器:before{}
    • 一般与content属性一起使用，为该元素之前的位置设置内容，这些内容无法被选中
  • 选择器:after{}
    • 一般与content属性一起使用，为该元素之后的位置设置内容，这些内容无法被选中

属性选择器

  • 标签名[属性名]{}
    • 选取拥有该属性名的所有元素

例：title属性:

​ title的值作为鼠标悬浮在元素上时显示的提示文字

​ p[title]:

​ 选中所有有设置title属性的所有<p>元素

  • 标签名[属性名=some]{}
    • 选取拥有该属性名且属性值为some的所有元素

例：p[title='hello']

​ 选中所有有设置title属性且属性值为'hello'的所有<p>元素

  • 标签名[属性名^=some]{}
    • 选取拥有该属性名且属性值以some为开头的所有元素
  • 标签名[属性名$=some]{}
    • 选取拥有该属性名且属性值以some为结尾的所有元素
  • 标签名[属性名*=some]{}
    • 选取拥有该属性名且属性值包含some的所有元素

子元素的伪类

IE8及IE6及以下不支持

  • （父元素>）子元素:first-child{}

    ​ 预示着选择器可以结合使用

    ​ 选中（指定）父元素的第一个（位置）子元素

  • （父元素>）子元素:last-child{}

    ​ 选中（指定）父元素的最后一个（位置）子元素

  • 子元素:nth-child(num){}

    ​ 选中父元素的第num个（位置）子元素

    ​ num参数一般为数字

    ​ num特殊值:

    ​ even:选取所有第偶数个（位置）子元素

    ​ odd:选取所有第奇数个（位置）子元素

  • 子元素:first-of-type{}

    ​ 选取父元素的所有该子元素类型的第一个子元素

  • 子元素:last-of-type{}

    ​ 选取父元素的所有该子元素类型的最后一个子元素

  • 子元素:nth-of-type(num){}

    ​ 选取父元素的所有该子元素类型的第num个子元素

    ​ 去前X个元素num=-n+X

  • 子元素:nth-last-of-type(num){}

    ​ 同上，只是从后往前算

兄弟元素选择器

  • 元素1+元素2{}

    可以选取元素1后紧挨着的元素2

    元素1和元素2互为兄弟元素

  • 元素1~元素2{}

    可以选取元素1后所有的元素2

    元素1和元素2互为兄弟元素

否定伪类

  • 从已选中的元素中剔除某些元素

  • 选择器1:not(选择器2){}

​ 剔除选择器1中符合选择器2条件的元素

选择器优先级

​ 当使用不同选择器，选择同一个元素并设置相同的样式时，由选择器的优先级决定显示效果。

​ 优先级规则:

​ 内联样式 优先级 1000

​ id选择器 优先级 100

​ 类和伪类 优先级 10

​ 元素选择器 优先级 1

​ 通配选择器 优先级 0

​ 继承的样式 优先级 没有优先级

​ 可以在样式的最后添加一个 !important 这样该样式将会获得一个最高的优先级，高于以上所有优先级，但是在开发中尽量避免使用，不方便修改。

​ 当选择器中包含多个选择器时，要把多个选择器的优先级相加在进行比较。

​ 注意：选择器优先级计算不会超过它的最大数量级

​ 比如选择器中最高的优先级10 则相加不会超过99

​ 注意：如果选择器的优先级相同,则会显示相对靠后设置的样式

​ 注意：并集选择器的优先级都是单独计算

伪类的优先级

  • :link

  • :visited

  • :hover

  • :active

​ 优先级相同

​ 但是要按照以上顺序设置,不然会覆盖失效。

样式继承

<div style=''>
	<p></p>
</div>

p标签会继承div的一些基本样式，不会被继承的样式有，背景、边框、定位等。

CSS属性

display

  • none

    • 不显示该元素,不占有位置

  • inline

    • 将元素变为内联元素

  • block

    • 将元素变为块元素

  • inline-block

    • 将元素变为行内块元素（既能设置宽高,又不会独占一行）

visibility

  • visible

    • 默认值可见

  • hidden

    • 隐藏但占有位置

overflow

文档流

默认所有元素都在文档流中。

  • 块元素:
    • 独占一行,自上向下排列,宽度等于父元素宽度,高度由内容高度撑开
  • 内联元素
    • 只占内容的宽度和长度,自左向右排列

处理子元素在父元素内的溢出情况

  • visible

    • 默认值不做处理,会溢出

  • hidden

    • 溢出的部分会被隐藏

  • scroll

    • 不论溢出与否都会添加滚动条

  • auto

    • 按照溢出的方向添加滚动条

float

  • none

    • 默认值,元素在文档流排列

  • left

    • 元素脱离文档流并向左浮动（左上）

  • right

    • 元素脱离文档流并向右浮动（右上）

浮动元素

  1. 浮动碰到父元素边框或浮动元素停止
  2. 浮动元素不会超过它上边的兄弟元素，最多一边齐
  3. 浮动元素不会盖住文档流中元素内的文字
  4. 块元素浮动后，宽度和高度都会被内容撑开
  5. 内联元素浮动后，宽度和高度可以被样式设置

clear

可以用来清楚其他浮动元素对当前元素的影响

  • none

    • 默认值

  • left

    • 清楚左侧浮动元素对当前元素的影响

  • right

    • 清楚右侧浮动元素对当前元素的影响

  • both

    • 清楚两侧元素对当前元素的影响（清除对当前元素影响最大的浮动元素）

position

通过定位可以任意的摆放元素的位置

  • static

    • 默认值,元素没有定位（未开启）

  • relative

    • 开启元素相对定位

  • absolute

    • 开启元素的绝对定位

  • fixed

    • 开启元素的固定定位（也是绝对定位的一种）

relative

  1. 若不设置偏移量，则元素不会发生任何变化，可使用left、right、top、bottom来设置偏移量

  2. 相对定位是在相对于元素在文档流中原来的位置进行偏移

  3. 相对定位不会脱离文档流,类似于灵魂出窍

  4. 相对定位会让元素提升一个层级，可以覆盖文档流元素

  5. 相对定位不会改变元素性质，块还是块，内联依旧是内联

absolute

  1. 绝对定位会脱离文档流

  2. 不设置偏移量，元素位置不会发生变化

  3. 相对于离它最近的开启了定位的祖先元素定位

  4. 绝对定位会让元素提升一个层级，可以覆盖文档流元素

  5. 绝对定位会改变元素性质，元素都变为块元素

fixed

同上1245

  1. 永远相对于浏览器定位，原点为页面左上角

  2. 不会随着滚动条移动而被隐藏（万恶的广告）

IE6不支持固定定位

若开启定位后元素层级相同，则结构在下面的元素覆盖上面的元素

z-index

一个正整数表示层级

没有开启定位的元素不能使用z-index

父元素层级再高也不能盖住子元素

层级越高越优先显示

opacity

设置元素的透明

0~1之间的值

0：全透明

1：不透明

IE8及以下不兼容，故使用

filter:alpha(opacity=百分比)

IE tester有bug导致IE6无法显示，实际上也可以

表格样式

  • border-spacing属性

    调整表格边框和单元格的距离

    XXpx

  • border-collapse属性

    可以调整表格边框和单元格边框合并

    collapse

    设置边框合并后，border-spacing属性自动失效

BFC

Block Formatting Context（IE6及以下不支持）

简称 BFC 该属性可以设置打开或关闭，默认为关闭。

当开启元素的BFC属性后，元素具有如下的特性:

  1. 父元素的垂直外边距不会和子元素重叠

  2. 开启BFC的元素不会被浮动元素所覆盖

  3. 开启BFC的元素可以包含浮动的子元素

开启BFC方法

  1. 设置元素浮动————可以撑开父元素，但是父元素宽度丢失，但会使下方元素上移

  2. 设置元素绝对定位————同上

  3. 设置元素为line-block————会导致宽度丢失

  4. 设置元素的overflow为非visible————副作用最小

    在IE6中不支持，但是可以开启hasLayout隐藏属性

开启方式

​ 1、zoom:1 数字为放大倍数

​ 2、父元素设置宽度后自动打开

样式问题

高度塌陷问题

​ 在文档流中，子元素会撑开父元素的高度，但是子元素设置浮动时，会导致子元素脱离文档流，父元素的高度塌陷，导致父元素下方各个元素上移，造成页面布局混乱。

  1. 开启BFC或hasLayout

  2. 设置overflow为非visible

  3. 使用clear属性

  4. 通过after伪类添加一个块元素再设置clear属性

    .clearfix:after{
    content:"";
    display:block;A
    clear:both;
}

    优点:不会添加多余的结构

父子元素外边距重叠问题

​ 描述：子元素box2的上边框若与父元素box1的上边框重叠，则给子元素设置margin-top会直接传递给父元素，相当于给父元素设置margin-top

解决方法

.box1:before{
	content:"";
	display:table;
}

综上，可将代码整合为

.clearfix:before,.clearfix:after{
    content:"";
    display:table;
    clear:both;
}
.clearfix{//兼容IE6
    zoom:1;
}

Hack

​ 有一些情况,有一些特殊的代码我们只需要在某些特殊的浏览器执行,而在别的浏览器中不需要执行,这是就可以使用CSS Hack来解决问题

​ CSS Hack实际上是一个特殊的代码,这段代码只在某些浏览器中可以识别,而在其他浏览器不能识别,通过这种方式来为一些浏览器设置特殊的代码

条件hack

​ 只会对IE10以下浏览器有用,其他浏览器只会当成注释。

<!--[if IE 6]>	//表示以下代码只会在IE6中执行
	HTML代码块
<![endif]-->

<!--[if lte IE 6]>	//表示以下代码只会在IE6及以下浏览器中被执行
	HTML代码块
<![endif]-->

通用语法

	<!--[if 关键字 IE 版本]>
		HTML代码块
	<![endif]-->

关键词

  1. 空

    是否,相当于==

  2. gt

    greater than 大于版本

  3. gte

    greater than or equal 大于等于版本

  4. lt

    less than 小于版本

  5. lte

    less than or equal 小于等于版本

  6. !

    非,相当于!=

属性hack

​ 对某项CSS属性hack

语法

选择器{
	_属性名:属性值;	//表示改样式只有在IE6及以下的浏览器才可一识别
	*属性名:属性值;	//表示改样式只有在IE7及以下的浏览器才可一识别
	属性名:属性值\0;//表示改样式只有在IE8及以上的浏览器才可一识别
}
选择符hack:
*HTML.选择器{
			
}
//该选择器只会被IE6识别

网页图标

  1. 首先把favicon.ico这个图标放到根目录下。
  2. 再html里面，head之间引入代码。

<link rel = "shortcut icon" href = "favicon.ico" type = "image/x-icon" />

在www.bitbug.net网站上将图片转化为ico图标格式

SEO(搜索引擎优化)

标签优化

  • title：百度28汉字以内，谷歌35汉字以内

  • description：120汉字以内

    <meta name = “description" content = "描述内容” />

  • keywords：

    <meta name = “keywords" content = "关键字内容” />

logo优化

logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要。

h1里面在放一个连接，可以返回首页的，给连接一个大小和logo的背景图片·连接里面要放文字（网站名称），为了搜索引擎收录我们。但是文字不要显示出来。

直接给font-size：0;就看不到文字了。

最后给链接一个title ，这样鼠标放到logo上，就可以看到提示文字了

字体图标

  1. www.iconfont.cn/或https://ic…

  2. 将fonts文件夹放入根目录

  3. 新建字体 @font-face

  4. demo.html中复制需要的结构

  5. 在需要添加字体图标的类中添加

追加字体图标

  1. 在下载网站中导入原下载包中的selection.json

  2. 挑选新增图标

  3. 下载

avatar
文章
阅读
粉丝