[note] CSS 文本|字体|高级选择器



CSS属性

一. 文本属性

text-decoration: 设置文字的装饰线

  • none:无任何装饰线
    • 可以去除a元素默 认的下划线
  • underline:下划线
    • u、ins元素默认(user agent stylesheet)就是设置了text-decoration为underline
  • overline:上划线
  • line-through:中划线(删除线)

letter-word-spacing: 设置字母、单词之间的间距

  • letter-spacing、word-spacing分别用于设置字母、单词之间的间距
  • 默认是0,可以设置为负数

text-transform: 文字的大小写转换

  • capitalize:将每个单词的首字符变为大写

  • uppercase:将每个单词的所有字符变为大写

  • lowercase:将每个单词的所有字符变为小写

  • none:没有任何影响

  • my name is coderwhy 方法大师傅打发到

    MY NAME IS CODERWHY

    My Name is Coderwhy

    my name is coderwhy

text-indent: 第一行内容的缩进

  • text-indent: 2em;刚好是缩进2个文字
  • 注意:【em】
    • text-indent中的em是相对于自己本身元素的font-size

text-align: 元素内容在元素中的水平对齐方式

  • left:左对齐
  • right:右对齐
  • center:正中间显示
  • justify:两端对齐
    • text-align: justify对最后一行没有效果,如果要加上最后一行,用text-align-last: justify
  • 注意:【div->div的情况】
    • 由于div是block的缘故,占一整行,text-align对其无用
    • 如果强行要用text-align,可以display: inline-block,设置为行内元素即可居中

二. 字体属性

font-size: 文字的大小

  • 具体数值+单位
    • 比如:Chrome默认font-size为16px,最小font-size 为12px
    • 也可以使用em单位:1em代表100%,2em代表200%,0.5em代表50%
  • 百分比
    • 基于父元素的font-size计算,比如50%表示等于父元素font-size的一半
  • 注意:【什么属性会继承】
    • 与文字相关的属性会继承下去,length、width是不继承的
  • 注意:【em相对于自身还是父元素】
    • font-size中的em是相对于父元素的size
    • text-indent中的em是相对于自身的size
    • em的使用没有rem广泛

font-family: 文字的字体名称

  • 可以设置1个或者多个字体名称(从左到右按顺序选择字体,直到找到可用的字体为止)
textarea {
    font-family: Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
}
/* 这里类似"\5B8B\4F53"都可以加上单双引号,表示为一个字符串整体,更正确稳妥,但各大网站都没加 */
  • 一般情况下,英文字体只适用于英文,中文字体同时适用于英文和中文
  • 如果在开发中, 中英文使用不同的字体:
    • 建议: 将英文字体写到前面, 中文字体写到后面
    • 英文字体 中文字体
    • 中文字体 英文字体(已经有字体了,就不会继续往后找字体了)
  • 网络字体(待补充)

font-weight: 文字的粗细(重量)

  • 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900:每一个数字表示一个重量
  • normal:等于400
  • bold:等于700
  • strong、b、h1~h6等标签的font-weight默认就是bold

font-style: 文字的常规、斜体显示

  • normal:常规显示
  • italic:用字体的斜体显示(前提, 是font-family这种字体本身是支持斜体)
    • em、i、cite、address、var、dfn等元素的font-style默认就是italic
    • i比较常用(用伪类i:: after做小图标,例如小箭头),其他的标签用得少
  • oblique:文本倾斜显示(让文字倾斜)

font-varient: 小写字母的显示形式(在中文里极少用到)

  • normal:常规显示
  • small-caps:将小写字母替换为缩小过的大写字母

line-height: 文本的最小行高

  • 行高可以先简单理解为一行文字所占据的高度

  • 行高的严格定义是:两行文字基线(baseline)之间的间距

  • 基线(baseline):与小写字母x最底部对齐的线

  • line-height=文字高度font-size+行距(即上下两个半行距)

行高 行距
  • 注意区分height和line-height的区别:

    • height:元素的整体高度
    • line-height:元素中每一行文字所占据的高度
  • 应用实例:假设div中只有一行文字,如何让这行文字在div内部垂直居中

    • line-height=height

font: 一个缩写属性

  • font-style font-variant font-weight font-size/line-height font-family

  • font-style、font-variant、font-weight可以随意调换顺序,也可以省略

  • /line-height可以省略,如果不省略,必须跟在font-size后面

  • font-size、font-family不可以调换顺序,不可以省略

    font: 12px/1.5 Microsoft YaHei,Heiti SC,arial,"\5B8B\4F53",sans-serif;
    

三. 更多选择器

属性选择器(attribute selectors) - [att]

拥有title属性的元素(每个元素都可以有title属性,鼠标悬停在上面会显示)

  • [attr]
    表示带有以 attr 命名的属性的元素。
  • [attr=value]
    表示带有以 attr 命名的属性,且属性值为 value 的元素。
  • [attr*=value]
    表示带有以 attr 命名的属性,且属性值包含有 value 的元素。
  • [attr^=value]属性值是以 value 开头的元素
  • [attr$=value]属性值是以 value 结尾的元素
  • [attr|=value]
    表示带有以 attr 命名的属性的元素,属性值为“value”或是以“value-”为前缀("-"为连字符,Unicode 编码为 U+002D)开头。
  • 典型的应用场景是用来匹配语言简写代码(如 zh-CN,zh-TW 可以用 zh 作为 value)。
  • [attr~=value]
    表示带有以 attr 命名的属性的元素,并且该属性是一个以空格作为分隔的值列表,其中至少有一个值为 value。
  /* 存在title属性的元素 */
  [title] {
    color: purple;
  }
  
  /* 存在href属性并且属性值匹配"https://example.org"的元素 */
  [href="https://example.org"] {
    color: green;
  }
  
  /* 存在href属性并且属性值包含"example"的元素 */
  [href*="example"] {
    font-size: 2em;
  }
  
  /* 存在href属性并且属性值结尾是".org"的<a> 元素 */
  a[href$=".org"] {
    font-style: italic;
  }
  
  /* <a> elements whose class attribute contains the word "logo" */
  /* 相当于类选择器.logo */
  a[class~="logo"] {
    padding: 2px;
  }

后代选择器(包括直接、间接子元素)(常用!)

  • 使用 (空格) 选择符

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

    div span { 
      background-color: DodgerBlue; 
    }
    .class1 span { 
      background-color: White; 
    }
    

注意<p>里不能嵌套<div>,结构会乱掉

子代选择器(不包括间接子元素)

  • 使用 > 选择符

  • 元素1 > 元素2 {样式声明 }
    
    div > span {
      background-color: DodgerBlue;
    }
    

兄弟选择器(较少使用)

  • 相邻兄弟选择器

    • 使用 + 选择符
    • 例:div元素后面紧挨着的p元素(且div、p元素必须是兄弟关系)
  • 通用兄弟选择器

    • 使用 ~ 选择符
    • 位置无须紧邻,只须同层级,A~B 选择A元素之后所有同层级B元素
    • 例:div元素后面的p元素(且div、p元素必须是兄弟关系)

交集选择器

  • 连起来写,没有空格

并集选择器(常用!)

  • 使用 , 选择符
  • 之前的基础选择器
    • 类选择器
    • id选择器
    • 元素选择器
    • 统配选择器

推荐阅读更多精彩内容

  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 915评论 0 6
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 1,118评论 0 11
  • 一)jQuery九类选择器【参见jQueryAPI.chm手册】 目的:通过九类选择器,能定位web页面(HTML...
    奋斗的老王阅读 847评论 0 51
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 547评论 0 1
  • Data Visualization with D3 D3: SVG中的jQurey 1. Add Documen...
    王策北阅读 333评论 0 2