CSS初步学习 | 青训营笔记

Austyn
92 阅读5分钟

这是我参与「第四届青训营 」笔记创作活动的的第2天

CSS

选择器:selector
属性:property
属性值:value
属性:属性值 -> 声明：declaration

页面中使用：

  • 外链:link标签 -> 内容和样式分离
  • 嵌入:<style></style>
  • 内联:对于标签的样式统一写在标签的style属性里面 ->UI组件库中需要使用不同的样式,如果额外有很多补充，推荐外链

CSS如何工作

加载HTML -> 解析HTML，加载CSS -> 创建DOM树并解析CSS -> 添加样式到DOM节点 -> 展示页面

选择器Selector

  • 通配选择器 *{……}
  • 标签选择器 p{}
  • id选择器 利用标签的id属性 #id{} id值需要唯一
  • 类选择器 利用标签的class属性 .class{} class可以出现多次 input.error{}:必须是input的error类才可以
  • 属性选择器 利用元素的属性 <input disabled/> [disabled]{} 只要元素有disabled的属性， 则遵循这一样式
    input[type = "disabled"]{} 表示input标签中类型是password的，则遵循这一样式
    *[title] {color:red;}:表示包含标题的所有元素变为红色 a[href] {color:red;}:表示a元素中含href属性的变为红色 a[href][title] {color:red;}:表示a元素中同时含href和title属性的变为红色 a[href="http://www.baidu.com"] {color: red;}:只选择有特定属性值的元素
    这种格式要求属性和属性值必须完全匹配
    如果想要根据属性值中的词列表的某个词进行选择，实现部分选择，则需要使用波浪号(~) p[class~="important"] {color: red;}: <p class="important warning"> 和 <p class="important"> 都可以实现匹配
  • 子串匹配属性选择器[和正则表达式类似]
类型描述
[abc^="def"]选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"]选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"]选择 abc 属性值中包含子串 "def" 的所有元素

伪类

  • 状态伪类: 链接有点击状态和未点击状态，input有focus状态有无

<a href="http://example.com"></a>
<input type="text" name="" id="">
<style>
    a:link {
        color: black;
    }

    a:visited {
        color: gray;
    }

    /*鼠标移到链接上*/
    a:hover {
        color: orange;
    }

    /*鼠标点击链接后*/
    a:active {
        color: red
    }

    :focus {
        border: aqua 2px solid;
    }
</style>
  • 结构性伪类:针对dom节点的位置进行选中，例如第一个、最后一个、奇数个等

<ol>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ol>
<style>
    li:first-child {
        color: aqua;
    }

    li:last-child {
        color: deepskyblue;
        border-bottom: none;
        /*  最后一个没有下边框*/
    }
</style>

img.png

组合器

组合选择器被称为 组合器（Combinators）。一共有4种组合器：

  • ' ' 后代组合器（Descendant combinator）

  • '>' 直接子代组合器（Child combinator）:与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素。

  • '~' 一般兄弟组合器（General sibling combinator）

  • '+' 紧邻兄弟组合器（Adjacent sibling combinator）:A+B B标签必须紧贴A标签，且A B 标签拥有相同的父标签

颜色

RGB

表示方法：

  • rgb(0-255,0-255,0-255)
  • #ffffff

HSL

H:Hue色相(0 红色-360)
S:Saturation饱和度 越高越鲜艳
L:Lightness亮度 越高越亮
可以通过S L 更显性地判断颜色的变化

alpha 透明度

alpha = 1 不透明
rgba、hsla -> a代表透明度
alpha = 1 -> ff(16进制表示)

属性

字体 font-family

字体族

原因：网页被不同的设备使用，不同设备上的字体不同，所以设备从前到后一一匹配

通用字体族
  • serif：衬线体 字体线条粗细不同(宋体)
  • sans-serif:无衬线体 字体线条粗细相同(黑体，微软雅黑)
  • cursive：手写体(楷体)
  • Fantasy：花里胡哨的字体
  • Monospace：等宽字体 字符宽度相同(编程中常用) font-family 最后要设置通用字体族

英文字体中没有中文字体，所以英语字体放在前面，中文字体放在后面，这样英文和中文显示的字体就有区分度

如果要使用自定义字体渲染，可以使用Web Fonts @font-face {src:url()} 性能上有开销，中文字体文件大，需要裁切

font-weight

字重(font-weight)与字体自身设计有关，有些字体只设计了正常和粗体两种模式

font-size

字体大小(font-size)：CSS 属性指定字体的大小。因为该属性的值会被用于计算 em 和 ex 长度单位，定义该值可能改变其他元素的大小。

em的理解

参考文章

CSS中的em单位

注意点：

1.如果元素自身设置了font-size，那么参考文本大小就是自身的font-size大小

2.如果元素自身没有设置font-size，那么参考文本大小就是父元素的font-size大小

3.为元素设置font-size时，如果使用em作为单位，那么参考文本大小是父元素的font-size大小，与第一条需要同时考虑，容易出错

line-height

参考网站： MDN-Line-height

取值：

  • 数字： 该属性的应用值是这个无单位数字<数字>乘以该元素的字体大小。计算值与指定值相同。大多数情况下，这是设置line-height的推荐方法，不会在继承时产生不确定的结果。
  • 百分比：与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。百分比值可能会带来不确定的结果
  • 长度：指定长度用于计算 line box 的高度。
/* Keyword value */
line-height: normal;

/* Unitless values: use this number multiplied
by the element's font size */
line-height: 3.5;

/* <length> values */
line-height: 3em;

/* <percentage> values */
line-height: 34%;

/* Global values */
line-height: inherit;
line-height: initial;
line-height: unset;

whitespace

  • normal
    连续的空白符会被合并，换行符会被当作空白符来处理。换行在填充「行框盒子 (line boxes)」时是必要。
  • nowrap
    和 normal 一样，连续的空白符会被合并。但文本内的换行无效。
  • pre
    连续的空白符会被保留。在遇到换行符或者
    元素时才会换行。
  • pre-wrap
    连续的空白符会被保留。在遇到换行符或者
    元素，或者需要为了填充「行框盒子 (line boxes)」时才会换行。 换行会遵从外部的box的需要
  • pre-line
    连续的空白符会被合并。在遇到换行符或者
    元素，或者需要为了填充「行框盒子 (line boxes)」时会换行。
avatar
文章
阅读
粉丝