CSS ｜ 青训营笔记

用户3755771934439
105 阅读8分钟

CSS

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

what is css

-   层叠样式表，显示HTML元素
-   样式定义如何显示HTML元素

why is css

-   实现内容与样式的分离
-   外部样式表可以极大的提高效率

（一）CSS基础语法

p {color：red；text-align:center;}
​
/*
// 选择器选择需要改变样式的HTML元素
// {}内可以有多条声明（属性+值）
// 每个声明以  【分号；】 隔开
// 属性与值以  【冒号：】隔开
*/
​

（二）选择器

1.id选择器

为所有特定 id 加上定义好的样式


<style>
    #para1              <!--样式运用与id=“para1”的元素-->
    {
      text-align:center;
      color:red;
    }
</style>
​
<body>
  <p id="para1">该段落运用了居中加红的样式</p>
  <p>
    这个段落不受该样式影响
  </p>
</body>

2.class选择器

为某类元素指定样式表：

  • 可以是单个元素类型

    
<style>
  p.center{text-align=center}
</style>
​
<body>
  <h1 class="center">这个标题不受影响</h1>
  <p class="center">这个段落居中对齐。</p> 
</body>
 
​

  • 也可以是全选元素（用 . 全选）

    .center{text-align=center}

【ps】类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

3. CSS 组合 和 嵌套 选择器

1）组合选择器

一起选中多个：

h1,h2,p{​ color:green;}

2）嵌套（层级）选择器

它可能适用于选择器内部的选择器的样式。

在下面的例子设置了四个样式：

  • p{ }: 为所有 p 元素指定一个样式。
  • .marked{ }: 为所有 class="marked" 的元素指定一个样式。
  • .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
  • p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

3）更多组合:

4.伪类选择器

1）状态伪类：

可以增加行为，如selector:hover等等表示不同的状态

2）结构伪类

根据dom节点在dom树中的位置决定是否选中：

例如，想要选中< u l >下第一个< li >，可以写:

li:firtst-child{

...

}

5.伪元素选择器

可以增加元素，如selector::before与selector::after

6.选择器权重

选择器特异度：

  • id:100
  • class:10
  • 元素：1
  • 权重大的优先显示
  • 组合选择器看累加权重
  • 权重相同后面覆盖前面
  • 在属性后面加 ！important设置为最终样式

7.属性选择器

用法：

1、选择指定属性的元素，语法“元素[属性名]”；

2、选择指定属性值的元素，语法“元素[属性名=属性值]”；

3、选择指定前缀属性值的元素，语法“元素[属性名^=属性值]”；

4、选择指定后缀属性值的元素，语法“元素[属性名$=属性值]”。

如要选中所有“jpg”格式的图片，可以使用指定后缀的属性选择器

img[src$=".jpg"]

8.样式的继承

继承的属性值为计算值（Computed Value）

如父级的属性值1.2em计算值为20px，则子级继承后得到的是20px，而不是1.2em

1）隐式继承

某些属性会自动继承其父元素的计算值，除非显示指定一个值

一般来说与文字相关的属性会默认地隐式继承，与盒子模型相关的属性不会默认继承。

2）显式继承

将属性值设置为 inherit

3）初始属性值

  • 在CSS中，每个属性都有一个初始值，例如 background-color 初始值为 transparent
  • 可以用 initial 关键字显式重置为初始值
  • 没有设置属性或者设置为inherit但是其父级没有设置样式，属性值默认为初始值。

（三）CSS的创建

1.外部样式表< link >

适用：当样式需要应用于很多页面时，可以通过改变一个文件来改变整个站点的外观

  • 用标签link链接外部样式表
  • link标签在（文档的）头部：

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

​ 【ps】 ①rel（relationship）：规定了当前文档与被链接文档之间的关系。

​ ②type ：规定被链接文档的类型。

2.内部样式表

适用：单个文档多次使用


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

3.内联样式

适用：样式仅需要在一个元素上应用一次时


<p style="color:sienna;margin-left:20px">这是一个段落。</p>

4.多重样式优先级

（内联样式） > （内部样式） >（外部样式） > 浏览器默认样式

注意： 如果外部样式链接放在内部样式的后面，则外部样式将覆盖内部样式。

（四）盒子模型

示意图:

注意点：

  • width与height ：

    • 指定的是content的宽度（高度）
    • 取值为长度、百分数、auto
    • auto取值由内容计算得到
    • 百分数是相对于当前盒子容器的宽（高）度
    • 父级容器有指定的宽度（高度）时，百分数才生效。

  • overflow：

    当设置了width和height后，内容溢出的情况下，可以设置overflow属性

    • visible：默认
    • hidden
    • scroll：有滚动条
    • auto：超出了就有滚动条
  • box-sizing:border-box;

设置width和height都为300px时：

这时设置的width和height为content加上border和padding的总长

  • border的分割

    当宽高设置为0时，只剩下边框，可以得到多个三角形用于构建图形（把其他边框设置为透明）。

    ·

/*html*/
<div class="box">
        <a href="">test</a>
</div>


/*css*/
*{
    margin:0;
    padding:0;      /*取消html元素的默认边距*/
}
​
.box
{
    width: 100px;
    height: 100px;
  /*  border-width: 10px;
    border-style:solid;
    border-color: red;*/
    border:1px red solid;       /* border的简写 */
    margin: 50px;               /* margin简写顺序：4个值上右下左，2个值分别为上下和左右 */
    padding-left:30px;          /* 元素实际宽度：border-left+border-right+padding-                                                                 left+padding-right */
    padding-top: 50px;
    box-sizing: border-box;     /*防止padding改变盒子的实际大小
}

（五）浮动布局

1.HTML元素的分类

常规流下将HTML元素分为：

  • 块元素：可以设置宽高，独立成行

    如：h1-6, p, div, ul , li

  • 行内元素（内联元素，行级元素）：不可以设置宽高，不独立成行。

    如 a, span

  • 行内块元素：可以设置宽高，不独立成行。

    如 img, input, button

2.display属性

display属性可以用来转化html元素属性,display:

  • block:转化为块元素 （常用）

  • inline:行内元素

  • inline-block:行内块元素

  • none:隐藏元素

    • 区别于visibility:hidden:

      • 前者在排版时完全不考虑，不参与文档流（没有占空间）
      • 后者还占着原来的空间，对布局产生影响

考虑一个问题：

块元素独立成行，如果在网页布局时想让两个div（块元素）在同一行，如何实现?

下面引入浮动属性：float

3.浮动属性

float:left(...)

(36条消息) CSS基础（四）——浮动布局pro1822的博客-CSDN博客css浮动布局

  • 使HTML元素脱离文档流，但是不脱离文本流（仍占文本空间）
  • 要消除浮动，可以利用伪元素选择器，在父级容器前后加上**clear:both**属性

（六）CSS定位

1）static:

正常（默认）

2）fixed

固定（参照当前浏览器视窗），不占位，重叠

3）relative

  • 移动相对定位元素，但它原本所占的空间不会改变。
  • 相对定位元素的定位参照是相对其正常位置。
  • 相对定位元素经常被用来作为绝对定位元素的容器块。

4）absolute:

  • 绝对定位的元素的位置相对于最近的已定位父元素
  • 如果元素没有已定位的父元素，那么它的位置相对于< html>:
  • 不占位，重叠

5）sticky

  • 粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed; ，它会固定在目标位置。

  • 特定阈值指的是 top, right, bottom 或 left 之一

  • 换言之，指定 top, right, bottom 或 left 四个阈值其中之一
  • 才可使粘性定位生效。否则其行为与相对定位相同。

  1. 重叠的元素

    • z-index属性指定了一个元素的堆叠顺序（默认为1）
    • 注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

（待扩充）样式属性

1）background背景

CSS 属性定义背景效果:

（同为简写的属性顺序）

Property描述
background简写属性，作用是将背景属性设置在一个声明中。
background-attachment背景图像是否固定或者随着页面的其余部分滚动。
background-color设置元素的背景颜色。
background-image把图像设置为背景。
background-position设置背景图像的起始位置。
background-repeat设置背景图像是否及如何重复。

2）文本

  • 从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

3）字体

  • font-family 属性应该设置几个字体名称作为一种"后备"机制

    如果浏览器不支持第一种字体，他将尝试下一种字体。

  • 字体大小：

    • 绝对大小
    • 相对大小

    为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。

    1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

    ​

  • 所有CSS字体属性

Property描述
font在一个声明中设置所有的字体属性
font-family指定文本的字体系列
font-size指定文本的字体大小
font-style指定文本的字体样式（斜体等）
font-variant以小型大写字体或者正常字体显示文本。
font-weight指定字体的粗细。

4）链接

特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

  • a:link - 正常，未访问过的链接

  • a:visited - 用户已访问过的链接

  • a:hover - 当用户鼠标放在链接上时

  • a:active - 链接被点击的那一刻

    ​

注意： a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。

注意： a:active 必须在 a:hover 之后。

5）列表

  • ul.a {list-style-type:circle;}
  • ol.d {list-style-type:lower-alpha;}
  • list-style-image:url('sqpurple.gif');
属性描述
list-style简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image将图像设置为列表项标志。
list-style-position设置列表中列表项标志的位置。
list-style-type设置列表项标志的类型。
  • caption{caption-side:bottom} ：使表格说明置底
avatar
文章
阅读
粉丝