pangzibo243's blogHomeArchivesTagsCategories
CSS 入门
|CSS

CSS 入门

CSS 指层叠样式表 (Cascading Style Sheets)

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表（位于 标签内部）
  4. 内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明： 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

CSS 语法

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

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

<style type="text/css">
    body {
        background: #ff0000;
    }
    h1 {
        background: aqua;
    }
    h2 {
        background: aliceblue;
    }
</style>

创建CSS的3种方式

内联样式表

在标签内使用style属性指定css代码

<a style="font-size: 40px; color: red">Hello World!</a>

文档内嵌样式表

在中使用style元素指定css代码

<style type = "text/css">
    a{
        font-size: 40px;
        color: #c7edcc;
    }
</style>

外部样式表

外部css文件，需要在html文件中的中进行链接

/*a.css*/
a{
    font-size: 40px;
    color: aquamarine;
}
<!--xxx.html-->
<link rel="stylesheet" type="text/css" href="a.css"/>

CSS 选择器

CSS选择器：就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。

基本选择器：

  • 标签选择器：针对一类标签
  • ID选择器：针对某一个特定的标签使用
  • 类选择器：针对你想要的所有标签使用
  • 通用选择器（通配符）：针对所有的标签都适用（不建议使用）

标签选择器

<head>
    <style type="text/css">
        p{
            font-size:14px;
        }
    </style>
</head>

<body>
<p>css</p>
</body>

id选择器

针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以”#”来定义。

<head>
    <title>Document</title>
    
    <style type="text/css">
        #mytitle{
            border:3px dashed green;
        }
    </style>
</head>

<body>
<h2 id="mytitle">你好</h2>
</body>

id选择器的选择符是“#”。

另外，特别强调的是：HTML页面，不能出现相同的id，哪怕他们不是一个类型。比如页面上有一个id为pp的p，一个id为pp的div，是非法的！

类选择器

规定用圆点.来定义

<head>
    <style type="text/css">
        /*定义类选择器*/
        .oneclass{
            width:800px;
        }
    </style>
</head>

<body>
<h2 class="oneclass">你好</h2>
</body>

和id非常相似，任何的标签都可以携带id属性和class属性。但是id属性只能被某一特定标签引用一次。

class属性的特点：

  • 特性1：类选择器可以被多种标签使用。
  • 特性2：同一个标签可以使用多个类选择器。用空格隔开

我们记住这句话：类上样式，id上行为。意思是说，class属性交给css使用，id属性交给js使用。

通用选择器

通用选择器，将匹配任何标签。不建议使用，IE有些版本不支持，大网站增加客户端负担。

<style type="text/css">
    /*定义通用选择器*，希望所有标签的上边距和左边距都为0*/
    *{
        margin-left:0px;
        margin-top:0px;
    }
</style>

属性选择器

<style>
    [title] {
        color:red;
    }
    [title="W3School"]{
        border:5px solid blue;
    }
    input [type="text"] {
        width:150px;
        display:block;
        margin-bottom:10px;
        background-color:yellow;
        font-family: Verdana, Arial;
    }
</style>

CSS 设置背景

可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。

p {
	background-color: gray;
}

要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。

body {
    background-image: url("https://www.w3school.com.cn/i/eg_bg_04.gif");
}
/*背景重复*/
body {
    background-image: url("https://www.w3school.com.cn/i/eg_bg_04.gif");
    background-repeat: repeat-y;
}
/*背景定位*/
body {
    background-image: url("https://www.w3school.com.cn/i/eg_bg_04.gif");
    background-repeat: no-repeat;
    background-position: center;
}
/*背景关联*/
/*通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响*/
body {
    background-image: url("https://www.w3school.com.cn/i/eg_bg_04.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
}

CSS 设置文本样式

文本缩进

/*使所有段落的首行缩进5em*/
p {
    text-indent: 5em;
}

水平对齐

text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。

值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。

h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}

字间隔

word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。

p.spread {
    word-spacing: 30px;
}
p.tight {
    word-spacing: -0.5em;
}

字母间隔

letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。

h1 {
    letter-spacing: -0.5em;
}
h4 {
    letter-spacing: 20px;
}

字符转换

h1 {text-transform: uppercase}
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}

文本装饰

text-decoration 有 5 个值：

  • none
  • underline
  • overline
  • line-through
  • blink

underline 会对元素加下划线，就像 HTML 中的 U 元素一样。

overline 的作用恰好相反，会在文本的顶端画一个上划线。

line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。

blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。

none 值会关闭原本应用到一个元素上的所有装饰。

a {
    text-decoration: underline overline;
}
p {
    text-decoration: line-through blink;
}

文本方向

/*从右到左*/
h2 {
    direction: rtl;
}

文本阴影

您能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色

h1{
    text-shadow: 5px 5px 5px #FF0000;
}

CSS字体

CSS 定义了 5 种通用字体系列：

  • Serif 字体
  • Sans-serif 字体
  • Monospace 字体
  • Cursive 字体
  • Fantasy 字体

指定字体

body {
    font-family: sans-serif;
}
a {
    font-family: Serif;
}
h1 {
    font-family: Monospaced;
}

字体风格

font-style 属性最常用于规定斜体文本。

该属性有三个值：

  • normal - 文本正常显示
  • italic - 文本斜体显示
  • oblique - 文本倾斜显示
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。

字体加粗

font-weight 属性设置文本的粗细。

使用 bold 关键字可以将文本设置为粗体。

关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。

如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

字体大小

font-size 属性设置文本的大小。

请始终使用正确的 HTML 标题，比如使用 h1 - h6 来标记标题，使用

来标记段落。

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}
h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */
body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值

CSS3 过渡

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

  • 规定您希望把效果添加到哪个 CSS 属性上
  • 规定效果的时长
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background: red;
        }

        div:hover {
            width: 300px;
            transition: width 2s linear 1s;
            -moz-transition: width 2s ease 1s, -moz-transform 2s ease-in-out 0.5s;
            -webkit-transition: width 2s ease-in 1s, -webkit-transform 2s ease-in-out 0.5s;
            -o-transition: width 2s ease-in-out 1s, -o-transform 2s ease-in-out 0.5s;
            -moz-transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            -o-transform: rotate(180deg);
        }

    </style>

</head>
<body>

<div></div>

</body>
</html>

CSS3 动画

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background: red;
            animation: test1 5s;
        }

        @keyframes test1 {
            from {
                background: red;
            }
            to{
                background: yellow;
            }
        }
    </style>
</head>
<body>

<div></div>

</body>
</html>

请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background: red;
            animation: test1 10s;
        }

        @keyframes test1 {
            0% {background: black}
            25% {background: yellow}
            50% {background: green}
            75% {background: white}
            100% {background: red}
        }

    </style>
</head>
<body>

<div></div>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            animation: test 10s linear 1s infinite alternate running;
        }

        @keyframes test {
            0%   {background:red; left:0px; top:0px;}
            25%  {background:yellow; left:200px; top:0px;}
            50%  {background:blue; left:200px; top:200px;}
            75%  {background:green; left:0px; top:200px;}
            100% {background:red; left:0px; top:0px;}
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

CSS 变换

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

translate

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：

div{
    width:100px;
    height:75px;
    background-color:yellow;
    border:1px solid black;
}
div#div2{
    transform:translate(50px,100px);
    -ms-transform:translate(50px,100px); /* IE 9 */
    -moz-transform:translate(50px,100px); /* Firefox */
    -webkit-transform:translate(50px,100px); /* Safari and Chrome */
    -o-transform:translate(50px,100px); /* Opera */
}

rotate

通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

div{
    width:100px;
    height:75px;
    background-color:yellow;
    border:1px solid black;
}
div#div2{
    transform:rotate(30deg);
    -ms-transform:rotate(30deg); /* IE 9 */
    -moz-transform:rotate(30deg); /* Firefox */
    -webkit-transform:rotate(30deg); /* Safari and Chrome */
    -o-transform:rotate(30deg); /* Opera */
}

scale

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：

div{
    width:100px;
    height:75px;
    background-color:yellow;
    border:1px solid black;
}
div#div2{
    margin:100px;
    transform:scale(2,4);
    -ms-transform:scale(2,4); /* IE 9 */
    -moz-transform:scale(2,4); /* Firefox */
    -webkit-transform:scale(2,4); /* Safari and Chrome */
    -o-transform:scale(2,4); /* Opera */
}

CSS 盒子模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

提示：背景应用于由内容和内边距、边框组成的区域。

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

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

参考

https://www.w3school.com.cn/

https://blog.csdn.net/qq_43539599/article/details/97820848

https://blog.csdn.net/DYD850804/article/details/80997251

Author: pangzibo243
Link: https://litianbo243.github.io/2019/10/22/CSS-入门/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.
CSS学习CSS
支付宝打赏
微信打赏