CSS

2019年9月13日 87次阅读 来源: kele

基础概念

  • CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明
    《CSS》

  • 选择器的分组：用逗号将需要分组的选择器分开

    h1,h2,h3,h4,h5,h6 {
  color: green;
  }
  • 继承：通过 CSS 继承，子元素将继承最高级元素所拥有的属性。

  • 派生选择器：通过依据元素在其位置的上下文关系来定义样式

    li strong {
    font-style: italic;
    font-weight: normal;
  }

  • 标签选择器没前缀，id选择器前缀为“#”，class选择器前缀为“.”

    #sidebar p .content{}

  • CSS的创建，类别
    1.外部样式表
    当样式需要应用于很多页面时，外部样式表将是理想的选择。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部

    <head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

    2.内部样式表
    当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表

    <head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

    3.内联样式
    当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式（style）属性。

    <p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

    4.多重样式
    如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
    《CSS》

CSS样式

  • 背景
    1.background-image：url(/i/eg_bg_03.gif)&url('~@/assets/images/zk_bs_icon.png')
    2.background-repeat：repeat（默认属性，水平和垂直方向上重复） | repeat-x | repeat-y（指定方向上重复） | no-repeat（只显示一次，不重复）| inherit（继承父元素的 background-repeat 属性）
    3.background-position：成对出现。相对父布局的上，左相对偏移。《CSS》
    4.background-size：percentage会让图片失真。cover是让图片按比例放大到最大，填充父布局。contain是让图片按比例放大，让图片在父布局内全部显示。《CSS》
    5.可以统一用background：background: url('~@/assets/images/zk_bs_icon.png') center center no-repeat;
  • 文本
    1.text-indent：首行缩进，针对块级元素，可能的值 length | % | inherit。p {text-indent:50px;}
    2.text-align：只针对元素的内容，不影响元素。inherit属性不支持IE。《CSS》
    3.word-spacing：字间距。p {word-spacing:25px;}
    4.letter-spacing：字母间隔。h1 {letter-spacing:2px}
    5.text-transform：控制文本的大小写
    6.white-space：处理元素中的空白符和换行符

  • 字体
    1.font-family：规定元素的字体系列。可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。逗号分隔，当字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，需要在 font-family 声明中加引号。p {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;}
    2.font-style：定义字体的风格，斜体、倾斜或正常字体。
    3.font-weight：设置文本的粗细。《CSS》
    4.font-size：结合百分比和 EM 来设置文字大小。1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。为 body 元素（父元素）以百分比设置默认的 font-size 值：

    body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

    《CSS》

  • 连接样式
    链接的四种状态：a:link – 普通的、未被访问的链接；a:visited – 用户已访问的链接；a:hover – 鼠标指针位于链接的上方；a:active – 链接被点击的时刻。
    当为链接的不同状态设置样式时，请按照以下次序规则：a:hover 必须位于 a:link 和 a:visited 之后。a:active 必须位于 a:hover 之后。
a:link {color:#FF0000;text-decoration:none;background-color:#B2FF99;}    // 字体颜色，去掉下划线，背景色    
a:visited {color:#00FF00;text-decoration:none;background-color:#B2FF99;}    
a:hover {color:#FF00FF;text-decoration:none;background-color:#B2FF99;}    
a:active {color:#0000FF;text-decoration:none;background-color:#B2FF99;}

CSS框模型

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

  • padding：padding 属性接受长度值或百分比值，但不允许使用负值。可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：h1 {padding: 10px 0.25em 2ex 20%;}。百分数值是相对于其父元素的 width 计算的。
  • margin：这个属性接受任何长度单位、百分数值甚至允许负值，auto（浏览器计算外边距）。可以按照上、右、下、左的顺序分别设置，百分数是相对于父元素的 width 计算的。
    值复制：如果缺少左外边距的值，则使用右外边距的值。如果缺少下外边距的值，则使用上外边距的值。如果缺少右外边距的值，则使用上外边距的值。
h1 {margin: 0.25em 1em 0.5em;}    /* 等价于 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;}        /* 等价于 0.5em 1em 0.5em 1em */
p {margin: 1px;}            /* 等价于 1px 1px 1px 1px */
  • 外边框合并：外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。《CSS》《CSS》《CSS》
    注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

CSS定位

  • 一切皆为框

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。display属性规定元素应该生成的框的类型。《CSS》

  • CSS定位机制

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。块级框从上到下一个接一个地排列。行内框在一行中水平布置。由一行形成的水平框称为行框（Line Box）。

  • position属性

1.static：没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
2.relative：生成相对定位的元素，相对于其正常位置进行定位。元素框偏移某个距离，它原本所占的空间仍保留（移动元素会导致它覆盖其它框）。因此，”left:20″ 会向元素的 LEFT 位置添加 20 像素。
3.absolute：元素框从文档流完全删除。生成绝对定位的元素，相对于 static 定位以外的第一个父元素即包含块进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
4.fixed：元素框的表现类似于将 position 设置为 absolute，不过是相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
【提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。”left（定义了定位元素左外边距边界与其包含块左边界之间的偏移。）”，所以具有float的功能。即：left:20，效果相当于float：left再偏移20。同理”top”, “right” 以及 “bottom”** 属性】《CSS》

  • CSS浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样（即不占空间）。在 CSS 中，我们通过 float 属性实现元素的浮动。
《CSS》
《CSS》

  • clear 属性：规定元素的哪一侧不允许其他浮动元素。《CSS》

CSS 选择器

  • css 分组：假设希望 h2 元素和段落都有灰色：h2, p {color:gray;} .important,.warning {background:silver;}。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将完全不同。CSS2 引入了一种新的简单选择器 – 通配选择器，显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。例如，下面的规则可以使文档中的每个元素都为红色：* {color:red;}
  • css 多类选择器:在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。例如，如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作：<p class="important warning">This paragraph</p>我们假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含（类名的顺序不限） important 和 warning 的所有元素还有一个银色的背景 。就可以写作：.important.warning {background:silver;}不含空格，逗号是分组。
  • css 后代选择器：在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。比如，h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。【划重点：1.必须空格隔开；2.影响xx元素的所有后代，不管嵌套层次多深。】
  • css 子元素选择器：与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素（第一个）的元素。子结合符两边可以有空白符也可以没有，这是可选的。《CSS》《CSS》
  • css 相邻兄弟选择器：相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
    1.相同的父元素；
    2.紧挨着的两个元素；
    3.只会改变其兄弟（后面）的元素样式。
    相邻兄弟选择器使用了加号（+），相邻兄弟结合符旁边可以有空白符也可以没有。
<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>

《CSS》

  • css 伪类：css 伪类用于向某些选择器添加特殊的效果。
    语法：1.伪类的语法：selector : pseudo-class {property: value}；2.CSS 类也可与伪类搭配使用：selector.class : pseudo-class {property: value}《CSS》
a:link {color: #FF0000}        /* 未访问的链接 */
a:visited {color: #00FF00}    /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}    /* 选定的链接 */
a.red : visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
  • css 伪元素：css伪元素用于向某些选择器设置特殊效果。
    语法：1.伪元素的语法：selector:pseudo-element {property:value;}；2.CSS 类也可以与伪元素配合使用：：selector.class:pseudo-element {property:value;}
    《CSS》

CSS 高级

  • css 对齐
    1.使用 margin 属性来水平对齐：把左和右外边距设置为 auto，规定的是均等地分配可用的外边距（IE8 以及更早的版本中是无效的）。
    2.使用 position 属性进行左和右对齐：position:absolute;right:0px;
    3.使用 float 属性来进行左和右对齐
  • 透明属性
    IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。如果没效果：background: rgba(0, 0, 0, 0.6);
img
{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}
  • css2 媒介类型
    媒介类型(Media Types)允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等。@media 规则使你有能力在相同的样式表中，使用不同的样式规则来针对不同的媒介。下面这个例子中的样式告知浏览器在显示器上显示 14 像素的 Verdana 字体。但是假如页面需要被打印，将使用 10 个像素的 Times 字体。注意：font-weight 被设置为粗体，不论显示器还是纸媒介：
<html>
<head>

<style>
@media screen
{
p.test {font-family:verdana,sans-serif; font-size:14px}
}

@media print
{
p.test {font-family:times,serif; font-size:10px}
}

@media screen,print
{
p.test {font-weight:bold}
}
</style>

</head>

<body>....</body>

</html>

《CSS》

    原文作者：kele
    原文地址: https://segmentfault.com/a/1190000017475358
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞