CSS 入门手册(一)

什么是 CSS?

1-CSS语法规则

2-样式表

外部样式表

内部样式表

行内样式表

3-选择器

4-背景

4.1 颜色定义方式

4.2 背景图像

5-文本

5.1 文本颜色

5.2 文本对齐方式

5.3 文本装饰

5.4 文本转换

5.5 文本首行缩进/间距

6-字体

6.1 字体系列

6.2 字体样式

6.3 字体大小

6.4 字体粗细

7-链接

8-盒子模型(Box Model)

8.1 边框

8.2 轮廓

8.3 边距

9-尺寸

10-可见性

11-定位

什么是 CSS?

CSS：层叠样式表(Cascading Style Sheets)。
作用：美化网页，装饰网页样式。

1-CSS语法规则

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

选择器通常你需要改变样式的 HTML 元素。
声明=1属性+1值，每个属性有一个值。属性和值被冒号分开。

CSS 实例 CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来:

p {color:red;text-align:center;}

格式化一下(增强可阅读性)

<head>
    <meta charset="utf-8">
    <title>CSS规则Or段落</title>
    <style>
        p {
            color: red;
            text-align: center;
        }
    </style>
</head>

<body>
    <p>前端开发涉及到多种工具，用于提高开发效率、优化代码、测试应用程序等。</p>
    <p>这个段落采用CSS样式化。。</p>
</body>

2-样式表

外部样式表

把写好的样式放在同级目录的另一个文件夹里，使用时只需要写一个link标签引入在编辑器里即可，他真正意义上做到了结构与样式完全分离。可以控制根目录里的所有页面。

内部样式表

主要位于<head>部分，利用<style>标签定义，可以说他做到了结构与样式分离但也没完全分离。可以控制一个页面里的多个元素。

行内样式表

作用在一行里，它通过标签的style属性来设置元素样式。注意这里不是style标签！可以控制一个页面里的一行元素。

3-选择器

常见几种选择器写法:

p {
  color: red; //作用于<p>元素，上面有例子
}
* {
  color: red; //通用选择器作用于整个页面
}
#xx {
  color: red; //id选择器作用于<id="xx".......>的元素
}
.xx {
  color: red; //类选择器作用于<class="xx"......>的元素,选择有特定 class 属性的 HTML 元素
}
body {
  background-color: blueviolet; //body选择器作用于页面body部分，设置背景颜色
}

选择器不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

<head>
    <meta charset="utf-8">
    <title>id和class选择器</title>
    <style>
        #sccp {
            text-align: center;
            color: red;
        }
        body{
            background-color: blueviolet;
        }
        .panda{
            color: aqua;
        }
        .center{
            text-align: center;
        }
    </style>
</head>

<body>
    <h2>没有修饰的h2</h2>
    <p id="sccp">这个段落采用id选择器</p>
    <p class="panda">这个段落采用class选择器</p>
    <p class="panda center">这个段落采用组合class选择器</p>
</body>

4-背景

用于定义HTML元素的背景

background-color:设置元素的背景颜色。
background-image:把图像设置为背景。
background-repeat:设置背景图像是否及如何重复。
background-attachment:背景图像是否固定或者随着页面的其余部分滚动。
background-position:设置背景图像的起始位置。

      #sccp {
          color: red;
      }
      body{
          background-color: blueviolet;
      }

4.1 颜色定义方式

十六进制 - 如："#ff0000"
RGB - 如："rgb(255,0,0)"
颜色名称 - 如："red"

4.2 背景图像

设置背景图。默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。

<head>
    ...
    <style>
        body {
            background-image:url('src/bg.png');

        }
    </style>

</head>
    ...

背景其他属性

    <style>
        body {
            background-color: blueviolet;
            background-image: url('src/bg.png');
            background-repeat: no-repeat;
            background-position: center top;
            background-attachment: fixed;
        }
    </style>

高效写法

        body {
            background: blueviolet url('src/bg.png') no-repeat center top fixed;
        }

当使用简写属性时，属性值的顺序为:

background-color
background-image
background-repeat
background-attachment
background-position

以上属性无需全部使用，你可以按照页面的实际需要使用。两种写法效果是一样的。

基本上所有的属性都可以类似于这样的简写.

5-文本

5.1 文本颜色

这个跟上面的背景色一样的设置，通用的。

十六进制 - 如："#ff0000"
RGB - 如："rgb(255,0,0)"
颜色名称 - 如："red"

5.2 文本对齐方式

居中:center
左对齐:left
右对齐:right
两端对齐:justify

<head>
    ...
    <style>
        h1 {
            text-align: center;
        }

        p.right {
            text-align: right;
        }

        p.justify {
            text-align:justify;
        }
    </style>

</head>

<body>
    <h1>Hello World!</h1>
    <p class="right">右对齐，嘿嘿嘿</p>
    <p class="justify">两端对齐，哈哈哈哈。......识点！</p>
</body>

</html>

5.3 文本装饰

用来设置或删除文本的装饰

<head>
    <meta charset="utf-8">
    <title>背景</title>
    <style>
        ...
        a {text-decoration:none;}
        h2 {text-decoration:overline;}
        h3 {text-decoration:line-through;}
        h4 {text-decoration:underline;}
    </style>

</head>

<body>
    ....
    <a href="https://shuaici.blog.csdn.net/">帅次</a>
    <p >跳转至: <a href="https://shuaici.blog.csdn.net/">帅次</a></p>
    <h2>text-decoration:overline</h2>
    <h3>text-decoration:line-through</h3>
    <h4>text-decoration:underline</h4>
</body>

不建议强调指出不是链接的文本，因为这常常混淆用户。

5.4 文本转换

字母全转大写
字母全转小写
首字母大写

<head>
    <style>
        ......
        p.uppercase {text-transform:uppercase;}
        p.lowercase {text-transform:lowercase;}
        p.capitalize {text-transform:capitalize;}
    </style>

</head>

<body>
    ......
    <p class="uppercase">ni shi da shauai ge</p>
    <p class="lowercase">NI shi DA shauai GE</p>
    <p class="capitalize">ni shi da shauai ge</p>
</body>

5.5 文本首行缩进/间距

<head>
    <style>
        .......
        p.text-indent{text-indent: 50px;}/*首行缩进*/
        p.letter-spacing{letter-spacing: 3px;}/*字母间距*/
        p.line-height{line-height: 2.5;}/*行高2.5倍*/
        p.text-shadow{text-shadow: 2px 2px 5px red;}/*水平阴影--垂直阴影--模糊效果--颜色*/
    </style>

</head>

<body>
    ......
    <p class="justify">两端对齐，哈哈哈哈。CSDN博客专家....识点！</p>
    <p class="text-indent letter-spacing line-height text-shadow">两端对齐，哈哈哈哈。CSDN博客专家....识点！</p>
    ......
</body>

6-字体

6.1 字体系列

在CSS中，有两种类型的字体系列名称：

通用字体系列 ：拥有相似外观的字体系统组合（如 "Serif" 或 "Monospace"）
特定字体系列 ：一个特定的字体系列（如 "Times" 或 "Courier"）

<head>
    <style>
        p.serif {font-family: "Times New Roman", Times, serif;}
        p.sansserif {font-family: Arial, Helvetica, sans-serif;}
    </style>

</head>

<body>
    <p class="serif">这是 Times New Roman</p>
    <p class="sansserif">这是 Arial, Helvetica, sans-serif</p>
</body>

如果字体系列的 名称超过一个字，它必须用引号 ，如Font Family："Times New Roman"。
多个字体系列是用一个逗号分隔指明。

6.2 字体样式

正常(normal)：正常显示文本
斜体(italic)：以斜体字显示的文字
倾斜的文字(oblique)：文字向一边倾斜（和斜体非常类似，不推荐使用）

<head>
    <style>
        p.normal {font-style:normal;}
        p.italic {font-style:italic;}
        p.oblique {font-style:oblique;}
    </style>
</head>

<body>
    <p class="normal">这是正常normal。</p>
    <p class="italic">这是斜体italic。</p>
    <p class="oblique">这是斜体oblique。</p>
</body>

6.3 字体大小

font-size 属性设置文本的大小，字体大小的值可以是绝对或相对的大小。你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。

绝对大小：
- 设置一个指定大小的文本
- 不允许用户在所有浏览器中改变文本大小
- 确定了输出的物理尺寸时绝对大小很有用
相对大小：
- 相对于周围的元素来设置大小
- 允许用户在浏览器中改变文字大小

如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。

<head>
    <style>
        p.px30 {font-size:30px;}
        p.em1875{font-size:1.875em;} /* 30px/16=1.875em */
        p.bai240{font-size:240%;} /* 使用百分比 */
    </style>
</head>

<body>
    <p class="px30">这是30px。</p>
    <p class="em1875">这是em1875。</p>
    <p class="bai240">这是240%。</p>
</body>

在所有浏览器的解决方案中，设置 <body>元素的默认字体大小的是百分比。使用浏览器调整文本的大小时，字体大小显示会有异常，推荐使用百分比设置。

6.4 字体粗细

normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
100~900 具体数字

定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。 inherit 规定应该从父元素继承字体的粗细。

<head>
    <style>
        p.weight{font-weight:800}
        p.lighter{font-weight:lighter}
    </style>
</head>

<body>
    <p class="bai240 weight">这是240%+weight800。</p>
    <p class="bai240 lighter">这是240%+lighter。</p>
</body>

7-链接

链接状态

a:link 正常，未访问过的链接
a:visited 用户已访问过的链接
a:hover 当用户鼠标放在链接上时
a:active 链接被点击的那一刻

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

    <style>
        a:link {color:#000000;}      /* 未访问链接*/
        a:visited {color:#0000FF;}  /* 已访问链接 */
        a:hover {color:#00FF00;}  /* 鼠标移动到链接上 */
        a:active {color:#FF0000;}  /* 鼠标点击时 */
    </style>

    <p >未访问链接： <a href="https://blog.csdn.net/g984160547/article/details/135680716?spm=1001.2014.3001.5501">孔子曰：帅次</a></p>
    <p >已访问链接： <a href="https://shuaici.blog.csdn.net/">孔子曰：帅次</a></p>
    <p >鼠标移动到链接上： <a href="https://shuaici.blog.csdn.net/">孔子曰：帅次</a></p>

同理， background-color 和 text-decoration 也可以根据链接状态进行设置。

8-盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，box model这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

<head>
    <style>
        div {
            background-color:antiquewhite;
            width: 250;
            border: 25px solid red;
            padding: 25px;
            margin: 25px;
        }
    </style>
</head>

<body>
    <div>这里是盒子模型。内边距 25px，外边距 25px， 边框红色。</div>
</body>

8.1 边框

border-style 属性用来定义边框的样式。样式比较多，下面就简单列几种

<head>
    <style>
        p.none {border-style:none;}
        p.dotted {border-style:dotted;}
        p.dashed {border-style:dashed;}
        p.solid {border-style:solid;}
        p.mix {border-style: dotted dashed solid double;}
    </style>
</head>

<body>
    <p class="none">无边框。</p>
    <p class="dotted">虚线边框。</p>
    <p class="dashed">虚线边框。</p>
    <p class="solid">实线边框。</p>
    <p class="mix">混合边框</p>
</body>

8.2 轮廓

outline：在一个声明中设置所有的轮廓属性
- outline-color
- outline-style
- outline-width
- inherit
outline-color：设置轮廓的颜色
- color-name
- hex-number
- rgb-number
- invert
- inherit
outline-style：设置轮廓的样式，跟边框相似，就不列啦。
outline-width：设置轮廓的宽度
- thin
- medium
- thick
- length
- inherit

<head>
    <style>
        p.outline {
            border: 1px solid red;
            outline-style: dotted;
            outline-width: 3px;
        }
    </style>
</head>

<body>
    <p class="outline">混合轮廓。CSDN博客专家，华云云享专家，专注Android开发多年，分享一些你需要的小知识点！</p>
</body>

8.3 边距

margin(外边距)：属性定义元素周围的空间。
- margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
- margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
adding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。
- 当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
- 单独使用 padding 属性可以改变上下左右的填充。

<head>
    <style>
        p {
            background-color: yellow;
        }

        p.padding {
            padding-top: 25px;
            padding-bottom: 25px;
            padding-right: 50px;
            padding-left: 50px;
        }

        p.margin {
            margin-top: 100px;
            margin-bottom: 100px;
            margin-right: 50px;
            margin-left: 50px;
        }
    </style>
</head>

<body>
    <p class="padding">混合轮廓。CSDN博客专家，华云云享专家，专注Android开发多年，分享一些你需要的小知识点！</p>
    <p class="padding margin">混合轮廓。CSDN博客专家，华云云享专家，专注Android开发多年，分享一些你需要的小知识点！</p>
</body>

9-尺寸

允许你控制元素的高度和宽度。同样，它允许你增加行间距。

height：设置元素的高度。
line-height：设置行高。
max-height：设置元素的最大高度。
max-width：设置元素的最大宽度。
min-height：设置元素的最小高度。
min-width：设置元素的最小宽度。
width：设置元素的宽度。

10-可见性

visibility:hidden可以隐藏某个元素，但占用空间。
display:none 可以隐藏某个元素，且隐藏的元素不会占用任何空间。

<head>
    <style>
        p.none {
            display:none;
            height: 100px;
            width: 80;}
        p.hidden {
            visibility: hidden;
            height: 100px;
            width: 80;
        }
        p.visible {
            background-color: chocolate;
            visibility: visible;
            height: 100px;
            width: 80;
            text-align: center;
        }
    </style>
</head>

<body>
    <p>元素可见性:none(隐藏且不占位置)</p>
    <p class="none">none</p>
    <p>元素可见性：hidden</p>
    <p class="hidden">hidden</p>
    <p>元素可见性：visible</p>
    <p class="visible">visible</p>
</body>

11-定位

position 属性指定了元素的定位类型。

position 属性的五个值：

static：静态定位，元素不会受到 top, bottom, left, right影响。
fixed：相对于浏览器窗口是固定位置。
relative：相对定位元素的定位是相对其正常位置进行移动。相对定位元素经常被用来作为绝对定位元素的容器块。
absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。
- absolute 定位使元素的位置与文档流无关，因此不占据空间。
- absolute 定位的元素和其他元素重叠。
sticky：粘性定位，悬浮。
- 注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

<head>
    <style>
        p.static {
            position: static;
            border: 3px solid red;
            top: 20px;
            left: 50px;
        }

        p.fixed {
            position: fixed;
            top: 40px;
            right: 40px;
        }

        p.relative {
            position: relative;
            top: -30px;
            color: red;
        }

        p.absolute {
            position: absolute;
            left: 120px;
            top: 120px;
        }

        p.sticky {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            padding: 5px;
            background-color: #cae8ca;
            border: 2px solid #4CAF50;
        }
    </style>
</head>

<body>
    <p class="static">这是position: static，不受top: 20px，lef：50px影响</p>
    <p class="fixed">这是position: fixed</p>
    <p>占位专用</p>
    <p class="relative">这是position: relative</p>
    <p>占位专用</p>
    <p class="absolute">这是position: absolute</p>
    <p class="sticky">这是position: absolute</p>
    <p >More</p> 。。。。。。
</body>

效果图1：