CSS 基础学习笔记

Posted on 2017-08-31 Edited on 2023-12-08 In HTML+CSS+JS

自学 CSS 基础笔记。

笔记整理中，未完待续……

CSS 重点内容：

选择器
浮动
盒子模型
定位

前言

CSS 概念

CSS（Cascading Style Sheet，可译为 层叠样式表 或 级联样式表 ）是一组 格式设置规则，用于控制 Web 页面的外观。
通过使用CSS样式设置页面的格式，可将页面的 内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。
将内容与表现形式分离，不仅可使 维护站点的外观更加容易，而且还可以使HTML文档代码更加简练， 缩短浏览器的加载时间 。

可以用 CSS 做什么？

CSS 是一种 样式表语言 ，用于 为HTML文档定义布局 。例如，CSS 涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。
HTML 可以用于为网站添加布局效果，但有可能被误用。而CSS则提供了更多选择，而且更为精确、完善。现在所有浏览器都支持CSS。
你可以制作自己的CSS样式表，为自己的网站增添花样。

CSS 和 HTML 的区别在哪里？

HTML 用于结构化内容
CSS 用于格式化结构化的内容

CSS 以 html 为基础的。
CSS 主要设置的就是 html 标签中的属性样式，css进行网页布局。

结构	作用
HTML 结构层	负责从 `语义的角度` 搭建页面结构
CSS 样式层	负责从 `审美的角度` 美化页面
JavaScript 行为层	负责从 `交互的角度` 提升用户体验

采用CSS有哪些好处？

CSS 是 Web 设计界的一次革命。 CSS 的具体优点包括：

通过单个样式表控制多个文档的布局；
更精确的布局控制；
为不同的媒体类型（屏幕、打印等）采取不同的布局；
无数高级、先进的技巧…

采用CSS布局相对于传统的 TABLE 网页布局而具有以下4个显著优势：

表现和内容相分离
- 将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。
提高页面浏览速度
- 对于同一个页面视觉效果，采用 CSS 布局的页面容量要比 TABLE 编码的页面文件容量小得多，前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。
易于维护和改版
- 你只要简单的修改几个 CSS 文件就可以重新设计整个网站的页面。
使用CSS布局更符合现在的 W3C 标准
- W3C 组织并不是 ISO 国际标准组织的成员，而是自成一派的万维网联盟(World Wide Web Consortium)，又称 W3C 理事会，是 Web 技术领域最具权威和影响力的国际中立性技术标准机构。

CSS 工作原理

CSS 语法

1	选择器{属性:值; 属性:值;.... }

选择器：就是一个选择谁的过程。

参数说明：属性和属性值之间用 冒号(:) 隔开，定义多个属性时，属性之间用英文输入法下的 分号(;) 隔开。

属性	赋值	介绍
color	color: red;	前景色（文字颜色）
font-size	font-size: 20px;	设置文字大小
width	width: 30px;	设置宽度
height	height: 30px;	设置高度
background-color	background-color: red;	设置背景颜色
text-align	text-align: center; left/right	文字居中
text-indent	text-indent: 2em;	首行缩进

注意：text-align: center; 在块级元素中可以使文字居中显示

CSS 书写位置介绍

方法1：行内样式表（style属性）

为 HTML 应用 CSS 的一种方法是使用 HTML 属性 style 。

<html>
<head>
    <meta charset="utf-8">
    <title> 例子 </title>
</head>

<body style="background-color: #FF0000;">
    <p style="color:green;font-size:30px;">这个页面背景是红色的!</p>
</body>
</html>

方法2：内部样式表（style元素）

为 HTML 应用 CSS 的另一种方法是采用 HTML 元素 style 。比如像这样：

<html>
<head>
    <meta charset="utf-8">
    <title>例子</title>

    <style type="text/css">
        body {background-color: #FF0000;}
    </style>

</head>
<body>
    <p>这个页面是红色的</p>
</body>
</html>

方法3：外部样式表（引用一个样式表文件）

更推荐采用这种引用外部样式表的方法。

外部样式表就是一个扩展名为 css 的文本文件。跟其他文件一样，你可以把样式表文件放在Web服务器上或者本地硬盘上。

例如，比方说你的样式表文件名为 style.css ，它通常被存放于名为style的目录中。可以像下面的方法一样引用：

1 2	<!-- 引用外部样式表 --> <link rel="stylesheet" type="text/css" href="style/style.css" />

注意：

要在href属性里给出样式表文件的地址。
这行代码必须被插入 HTML 代码的头部（header），即放在标签 <head> 和标签 </head> 之间。就像这样：

<html>
<head>
    <meta charset="utf-8">
    <title>我的文档</title>
    <link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
  ....

这个链接告诉浏览器：在显示该 HTML 文件时，应使用给出的 CSS 文件进行布局。

这种方法的优越之处在于：多个 HTML 文档可以同时引用一个样式表。换句话说，可以用一个 CSS 文件来控制多个 HTML 文档的布局。

CSS 书写方式之间的区别

内嵌式写法：

代码可维护性较差，没有实现css代码与html结构的完全分离
影响的范围只有当前页面

行内是写法：

代码可维护性极差，css代码和html结构没有实现分离
影响的范围只有当前标签

外联式写法：

代码可维护性高，css与html结构完全分离
影响范围广，当前整个网页站点。

选择器

选择器分类

基础选择器

标签选择器
类选择器（⭐⭐⭐⭐⭐）
id 选择器
通配符选择器

复合选择器

标签指定式选择器（⭐⭐⭐⭐）
后代选择器（⭐⭐⭐⭐⭐）
并集选择器

标签选择器

标签：就是 html 中的标签

用法

标签名{
    属性: 值;
    属性: 值;
}

例如：

<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style type="text/css">
        
        <!-- 设置 p 标签的样式 -->
        p{
            color: red; 
            font-size: 25px;
            width: 200px;
            height: 50px;
            background-color: pink;
        }
        
    </style>
</head>
<body>
    <p>这是一个p标签</p>
</body>

补充

颜色的显示方式：

直接设置对应颜色的名称

1	color：red;

通过十六进制显示：以 # 开头，0-ff

1	color: #2934de;

通过 rgb 方式显示：R：红色，0-255；G：绿色，0-255；B：蓝色，0-255

1	color: rgb(4,255,20);

通过 rgba 显示：a 设置透明度（alpha），范围 0-1

1	background-color: rgba(0,0,0,0.1);

类选择器（重点）

用法

1
2
3

.自定义名称{
    属性: 值;
}

调用：标签通过 class 属性调用类样式。

<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style type="text/css">
        <!-- 类样式的定义 -->
        .fontcolor{
            color: red;
        }
    </style>
</head>
<body>
    <!-- 调用类选择器 -->
    <p class="fontcolor">类选择器例子</p>
</body>

特点

谁调用谁改变，多个标签可以同时调用一个类样式

一个标签可以调用多个类样式（相当于人的名字）

例如：

1 2	<!-- 调用多个类样式 --> <p class="fontcolor fontsize">调用多个类样式</p>

类的命名规范

不能以纯数字或者以数字开头定义类名
不推荐使用汉字定义类名
不能以特殊符号或者以特殊符号开头（“_”除外）定义类名
不建议使用标签名或者属性名定义类名

常用的命名：

中文	英文
头	header
内容	content/container
尾	footer
导航	nav
侧栏	sidebar
栏目	column
页面外围控制整体布局宽度	wrapper
左右中	left/right/center
登陆条	loginbar
标志	logo
广告	banner
页面主体	main
热点	hot
新闻	news
下载	download
子导航	subnav
菜单	menu
子菜单	submenu
搜索	search
友情链接	friendlink
页脚	footer
版权	copyright
滚动	scroll
内容	content

id 选择器

用法

#id名称{
    属性: 值;
    ……
}

调用：通过 id 属性调用样式

1	<p id="p_color">p1</p>

特点

不建议多个标签使用同一 id 选择器的样式（id 和 js 配合使用）
一个标签只能调用一个 id 样式

通配符选择器

用法

*{
    属性: 值；
    ……
}

例如：

*{
    color: red;
    font-size: 20px;
}

特点

将页面中的所有标签都选中，设置样式；
可以用来进行页面样式的初始化。

字体相关属性

属性	描述
color	设置文字颜色
font-size	设置文字大小
font-family	设置文字字体
font-weight	设置文字加粗
font-style	设置文字斜体
line-height	行高

font-family

直接设置汉字

1
2
3

p{
    font-family: 微软雅黑;
}

设置对应字体的英文
设置 unicode 编码

字体名称	英文名称	unicode 编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	microsoft yahei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼园	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

font-family 可以设置多个值：

1
2
3

body{
    font-family: "SimSun","Arial Narrow","微软雅黑","\5B8B\4F53";
}

font-weight

取值方式：

直接设置数字，范围 100-900
bold (字体加粗) 效果为 700-900
normal(文字字体正常显示)

注意：文字加粗显示，推荐使用 font-weight:700;

p{
    font-weight: normal;

    <!-- 文字加粗 -->
    <!-- font-weight: 900; --> 
    <!-- font-weight: bold; -->
}

font-style

italic：文字斜体显示
normal：文字正常显示

font 属性联写

用法：

1	font: font-style font-weight font-size/line-height font-family

例如：

1
2
3

p{
    font: italic 700 30px 宋体;
}

注意：

font属性联写必须有 font-size 和 font-family （其他属性可以不写）；
font-size 和 font-family 的 顺序不能换。

标签指定式选择器

标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为 class 选择器或 id 选择器，两个选择器之间不能有空格。如：

1
2
3

h1.one
或
h1#two

用法：

标签名.选择器名{
    属性:值;
    属性:值;
}

特点关系：既……又……

实例：

p.one{
    color: yellow;
} */

div#div1{
    color: red;
}

后代选择器

后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。

用法：

选择器 + 空格 + 选择器{
    属性: 值；
    属性: 值;
}

特点：

标签之间必须属于嵌套关系
选择器之间必须有空格

关系：父与子

实例：

<head>
    <style  type="text/css">

        /*  p{
                color: red;
            } */

        /*  div p{
                color: red;
            } */

        /* .one p{
                color: red;
        } */

        p.one span{
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>
        <p class="one">
            <span>
            文字
            </span>
        </p>

        <p class="two">
            <span>
            文字
            </span>
        </p>

    <!-- <div class="one">
            <p>
            幸福的p
            </p>
         </div>

        <p>
            孤独的p
        </p>
    -->
</body>

并集选择器

并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标记选择器、class 类选择器、id 选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

用法：

选择器,选择器,选择器{
    属性: 值;
    ……
}

作用：将样式集体声明，css 样式初始化

特点：并集选择器之间必须用逗号隔开！

div,p,span{
    color: red;
}
<head>
    <meta charset="utf-8">
    <style type="text/css">

        div,p,span{
            color: red;
        }

    </style>
</head>
<body>
    <div>123</div>
    <p>567</p>
    <span>asdf</span>
</body>

CSS 书写位置及 Html 标签分类

CSS 书写位置

外部样式表

1	<link rel=”stylesheet” href=””>

新建一个文件，后缀名以 .css 命名（css文件）
在 html 页面中通过 <link rel=”stylesheet” href=””> 标签将 css 文件引入.

例如：

<head>
    <title>外部样式表</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="1/1.css">
</head>
<body>

内部样式表

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

<head>
    <meta charset="UTF-8">
    <title>内部样式表</title>
    <style type="text/css">
        p {
            color: red;
        }
    </style>
</head>

内联样式表

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。

1
2
3

<body>
    <p style="color:red;font-size: 30px;font-family: 华文宋体;font-weight: 900;">p中的文字</p>
</body>

CSS 书写方式之间的区别

内嵌式写法：

◆ 代码可维护性较差，没有实现 css 代码与 html 结构的完全分离

◆ 影响的范围只有当前页面

行内式写法：

◆ 代码可维护性极差，css 代码和 html 结构没有实现分离

◆ 影响的范围只有当前标签

外联式写法：

◆ 代码可维护性高，css 与 html 结构完全分离

◆ 影响范围广，当前整个网页站点。

HTML 标签的分类

块级标签

例如：

div,p,h1-h6,ul,li,dl,dt,dd

特点：

元素自己独占一行显示，不与其他元素待在同一行
可以设置宽度和高度
当嵌套一个块级元素，子元素如果不设置宽度，那么该子元素的宽度为父元素的宽度。

行级标签

例如：

a，span,strong,u

特点：

元素在一行上显示
不能直接设置宽度和高度

行内块元素

例如：

img,input,textarea

特点：

元素在一行上显示
可以设置宽度和高度

元素之间的转换

1
2
3

display:inline // 将元素转化为行内元素
display:inline-block // 将元素转化行内块元素
display:block // 将元素转化为块元素

实例：

a{
    width: 300px;
    height: 300px;
    background-color: red;
    /*  display: inline-block;   */  
    /* 将行内元素转化为行内块元素 */
    display: block;
    /* 将行内元素转化为块元素 */
}

div{
    width: 300px;
    height: 300px;
    background-color: pink;
    /* 将行内元素转化为行内元素 */
    display: inline;
}