CSS之特性,背景,行高,复合选择器,显示模式

css复合选择器

css 分为 基础选择器 和 复合选择器 , 但是基础选择器不能满足实际开发中 快速高效的选择标签

  • 目的是为了选择更准确更精细的目标元素标签
  • 复合选择器是由两个或者多个基础选择器 , 通过不同的方式组合而成

后代选择器 ( 重点 )

父级 子级 {
  属性名: 属性值;
}
div a {
  color: #ccc;
}
  • 当标签发生嵌套时 , 内层标签就成为外层标签的后代;
  • 子孙后代都可以选择 , 或者说 , 它能包含任何包含在内的标签 .

子元素选择器

作用 : 子元素选择器只能选择作为某元素子元素的元素

父级>子级 {
  属性名: 属性值;
}
div>a {
  color: #ccc;
}

交集选择器

标签名.类名 {
  属性名: 属性值;
}
/* 即是div 又是nav类名 并且的关系 */
div.nav {
  color: #ccc;
}

并集选择器 ( 重点 )

应用 : 如果某些选择器定义相同的样式 , 就可以利用并集选择器 , 可以让代码更简洁

并集选择器 是各个选择器通过 , 链接而成 , 通常用于集体声明 ;

任何形式的选择器 ( 标签 class类 id等 ) , 都可以作为并集选择器的一部分 ;

标签名,
类名 {
  属性名: 属性值;
}
div,
.nav {
  color: #ccc;
}

链接伪类选择器 ( 重点 )

作用 : 用于向某些选择器添加特殊效果 , 比如给链接添加特殊效果 , 比如可以选择第一个 , 第 n 个元素 ; 因为伪类选择器很多 , 比如链接伪类 , 结构伪类

链接伪类选择器

a:link {} 未访问的链接

a:visited {} 已访问的链接

a:hover {} 鼠标移动上的链接

a:active {} 选定的链接

注意 : 书写尽量不要颠倒 lvha 的顺序 , 否则可能容易引起错误

标签的显示模式 ( 重要 )

什么是标签显示模式 ?
  • 标签以什么方式进行显示 , 比如 div 自己占一行 , 比如 span 一行可以放很多个
  • 作用 : 网页的标签非常多 , 在不同的地方用到不同的类型 , 以便更好的完成我们的网页 ;
  • HTML 标签一般分为 块标签行内标签 两种类型 , 也可以成为 块元素行内元素
块级元素 ( block-level )
<!-- 常见的块级元素有 h1~h6 p div ul ol li 等 其中 div 标签是典型的块元素 -->

块级元素的特点

  • 独占一行
  • 高度 , 宽度 , 外边距以及内部编辑可以控制 .
  • 宽度默认是容器的100%
  • 是一个容器及盒子 , 里面可以放行内或者块级元素
  • 注意 : 只有文字才能组成段落 因此 p 里面不能放块级元素 , 同理还有 h1~h6 dt 这些文字类块级元素里面不能放其他块级元素 .
行内元素 ( inline-level )
<!-- 常见的行内元素有 a strong b em i del s ins u span等 其中 span 标签是典型的行内元素有时候也叫内联元素 -->

行内元素的特点

  • 相邻元素在一行上 , 可以在一行显示多个
  • 高 , 宽直接设置是无效的
  • 默认高度就是内容本身的高度
  • 行内元素只能容纳文本或其他行内元素
  • 注意 : 特殊情况 a 里面可以放块元素 , 但是给 a 转换一下块级模式最安全
行内块元素 ( inline-block )
<!-- 在行内元素中有几个特殊的标签 img input td 可以对他们设置宽高和对齐属性, 有些资料可能会称为行内块元素-->

行内块元素的特点

  • 和相邻的行内块元素在一行内显示 , 但是之间会有缝隙 , 一行可以显示多个
  • 默认宽度就是它本身的宽度
  • 高度 , 行高 , 外边距 , 内边距都可以控制

标签显示模式转换 ( display )

  • 块级 转 行内 : display: inline;
  • 行内 转 块级 : display: block;
  • 块级 , 行内 转 行内块 : display: inline-block;

行高 ( line-height ) 文字垂直居中

  • 行高和高度的三种关系

    • 行高 = 上距离 + 下距离 + 文字高度
    • 行高大于高度文字会偏下
    • 行高小于高度文字会偏上
  • 行高的测量
    • 汉字和英文是有 顶线 中线 基线 底线 组成 两行文字的基线之间的距离就是行高 ; 也就是说 一行汉子的地步到另一行汉子的地步 , 就是这两行文字之间的行高

CSS 背景 ( background )

背景颜色 ( background-color )
background-color: #ccc;
背景图片 ( background-image )
background-image: url('image/test.png');
背景平铺 (background-repeat)
background-repeat: repeat | no-repeat | repeat-x | repeat-y
参数 作用
repeat 默认 , 背景图片在纵向和横向平铺显示
no-repeat 不平铺
repeat-x x轴 横向平铺
repeat-y y轴 纵向平铺
背景位置 ( background-position ) 重点
background-position: length || length
background-position: position || position
background-position: x坐标 y坐标;
background-position: 10px 50px;
参数
length 百分数 | 浮点数和单位标识符组成的长度值
position top | bottom | left | right | center 方位名词

注意 :

  • 必须先指定 background-image 属性
  • position 后面跟 x坐标 和 y坐标 , 可以使用方位名词 , 也可以使用精确单位
  • 如果只指定了一个方位名词 , 另一个默认居中
  • 如果至指定一个方位名词 , 默认是 x 另一个默认是 y 居中
  • 如果指定两个值 , 两个值都是方位名词 , 则两个值顺序无关 比如 left top 和 top left 效果一致
  • 如果指定两个值 , 精确单位和方位名词混用 , 则第一个值是 x 第二个值是 y
背景附着 ( background-attachment )

解释 : 背景附着就是解释背景是滚动还是固定的

background-attachment: scroll | fixed
参数 作用
scroll 默认 背景图像是跟随对象内容滚动
fixed 背景图像固定
背景简写 ( background )
  • background : 属性的值书写顺序没有强制要求 , 为了可读性建议
  • background: 背景颜色 背景图片 背景平铺 背景滚动 背景位置
  • background: #ccc url(images/image.png) no-repeat fixed center top;
背景透明 ( CSS3 )
  • background: rgba(0, 0, 0, 0.2);
  • 最后一个参数是 alpha 透明度 取值范围 0~1 之间
  • 背景半透明是指盒子半透明 , 盒子的内容不受影响
  • 低于 IE9 的版本不支持

CSS 三大特性

CSS 层叠性
  • 概念 : 所谓层叠性是指多种css样式的叠加 ; 是浏览器处理冲突的方法 , 如果一个属性通过两个相同的选择器设置属性在同一个元素上 , 这个时候会有一个属性被另一个属性层叠掉 ;
  • 原则 :
    • 样式冲突 , 遵循就近原则 , 哪个样式离结构近 , 就执行哪个样式
    • 样式不冲突 , 不会层叠
CSS 继承性
  • 概念 : 子标签会继承父标签的一些样式 , 如字体颜色和字号 ; 想要设置一个可继承属性 , 只需要将它应用与父元素即可
  • 注意 :
    • 恰当的使用继承可以简化代码 , 降低 css 的复杂性 , 比如有很多子级都需要某个样式 , 可以给父级指定一个
    • 子元素可以继承父元素的样式 , text-, font-, line-, color 这些属性都是可以继承的
CSS 优先级
  • 概念 : 定义css样式的时候 , 经常出现两个或多个规则用在一个元素上 , 此时

    • 选择器相同 , 则执行层叠性
    • 选择器不同 , 就会出现优先级的问题
权重计算公式
标签选择器 计算权重公式
继承 或者 * 0,0,0,0
每个元素( 标签选择器 ) 0,0,0,1
每个类 , 伪类 0,0,1,0
每个 id 0,1,0,0
每个行内样式 style="" 1,0,0,0
每个 !important ∞ 无穷大
权重叠加

我们经常用交集选择器 , 后代选择器等 ; 是有多个基础选择器组合而成,那么此时,就是会出现权重叠加。

注意 :

  • 数位之间没有进制 , 所以不会存在 10 个 div 能赶上一个类选择器的情况。
  • 继承的权重是 0
  • 如果权重相同,则会根据层叠性,就近原则;
  • 2 个特殊标签 链接 和 h标题 他们浏览器有自己默认的样式 , 继承的权重为 0 ,所以还要单独给链接和标题一个样式。

原文地址:https://www.cnblogs.com/article-record/p/12246949.html

时间: 2024-10-08 13:19:32

CSS之特性,背景,行高,复合选择器,显示模式的相关文章

css总结6:行高和字体大小的关系

1 CSS line-height 属性 代码: p.small {line-height:70%}p.big {line-height:200%} 运行后:70%与200%宽高 2 CSS font-size 属性 h1 {font-size:250%;}h2 {font-size:200%;}p {font-size:100%;} 两者特点: 1 一行文字行高和父元素高度一致的时候,垂直居中显示 2 行高:文字高度+上下边距 原文地址:https://www.cnblogs.com/auto

css基础 文字垂直居中 行高等于容器高度

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

(2)css的复合选择器与特性

css的复合选择器与特性 在本篇学习资料中,将深入了解css的相关概念,上一篇介绍的3种基本选择器的基础上,学习3种由基本选择器复合构成的选择器,然后再介绍css的两个重要的特性. 1.复合选择器 复合选择器就是两个或多个基本选择器,通过不同的方式连接成的选择器. 复合选择器的三种类型:交集选择器.并集选择器.后代选择器. (1)交集选择器 “交集”复合选择器由两个选择器直接连接构成:其中第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器:这两个选择器之间不能有空格. 例如:下图声明了

项目复习期总结3:CSS引入方式,注释,命名规范,背景,行高,文本属性

目录: 1.CSS注释的书写 怎么写?好处? 2.CSS引入方式  各种的优缺点 3.选择器的写法与选择器的优先级 4.CSS命名规范 5.背景,行高 6.文本(text与font开头)等所有属性 ① CSS注释书写规范: 1.单行注释:    直接写在属性值的后面,如: ① .search{ border:1pxsolid#fff;/*定义搜索输入框边框*/ background:url(../images/icon.gif)no-report#333;/*定义搜索框的背景*/ } ② .wr

项目复习期总结3:CSS引入方式,凝视,命名规范,背景,行高,文本属性

文件夹: 1.CSS凝视的书写 怎么写?优点? 2.CSS引入方式  各种的优缺点 3.选择器的写法与选择器的优先级 4.CSS命名规范 5.背景,行高 6.文本(text与font开头)等全部属性 ① CSS凝视书写规范: 1.单行凝视:    直接写在属性值的后面.如: ① .search{ border:1pxsolid#fff;/*定义搜索输入框边框*/ background:url(../images/icon.gif)no-report#333;/*定义搜索框的背景*/ } ② .w

【转】css行高line-height的一些深入理解及应用

一.前言 前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”,是个不错的文章,学到了不少东西,建议您看看. 这里,我也要讲讲我对line-height的一些理解,所讲解的东西绝大多数与上面提到的“深入理解css 行高”是不重复的,可以说是补充或是另外一个角度的思考.另外,将结合实际,展示line-height的一些特性和一些常见应用,帮助您对css行高line-height的理解.所讲述的并不一定都是正确的,欢迎指正欢迎交流. 二.一些字面意思“行高”顾名思意指一行文字的高度

《转载》深入理解 CSS 中的行高与基线

这篇文章总结的很好,故转载收藏. 1.基本概念 1.  基线.底线.顶线.中线 注意:基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿. 2. 内容区 内容区是指底线和顶线包裹的区域(行内元素display:inline可以通过background-color属性显示出来),实际中不一定看得到,但确实存在.内容区的大小依据font-size的值和字数进行变化. 3. 行距.行高 行高(line-height):包括内容区与以内容区为基础对称拓展的空白区域,我们称之为行

css行高line-height的一些深入理解及应用

by zhangxinxu from http://www.zhangxinxu.com,原文地址:http://www.zhangxinxu.com/wordpress/?p=384 一.一些字面意思"行高"顾名思意指一行文字的高度.具体来说是指两行文字间基线之间的距离.基线实在英文字母中用到的一个概念,我们刚学英语的时使用的那个英语本子每行有四条线,其中底部第二条线就是基线,是a,c,z,x等字母的底边线.下图的红色线即为基线. vertical-align中有top,middle

css行高line-height的用法(转)

本文导读: “行高“指一行文子的高度,具体来说是指两行文子间基线间的距离.在CSS,line-height被用来控制行与行之间的垂直距离.line- height 属性会影响行框的布局.在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离.所有浏览器都支持 line-height 属性. 一.line-height语法 line-height属性的具体定义列表如下: 语法: line-height : normal | <实数> | <长度> | <百分比