CSS基础学习笔记

(இωஇ)(*´I`*)

已于 2022-05-23 11:11:59 修改

阅读量254

点赞数 1

分类专栏： web前端学习文章标签： css

于 2021-07-23 12:10:47 首次发布

本文链接：https://blog.csdn.net/qq_54403943/article/details/118855787

版权

「学习笔记」CSS基础

|前言

仅供学习使用💪💪

|CSS构造块

「1. HTML的局限性」

HTML满足不了设计者的需求，可以将网页结构与样式相分离，这样就可以在不更改网页结构的前提下，更换网站的样式。
操作HTML属性不方便
HTML里面添加样式带来的是无尽的臃肿和繁琐

「2. CSS网页的美容师」

让我们的网页更加丰富多彩，布局更加灵活自如。
CSS最大的贡献：让HTML从样式中脱离，实现了HTML专注去做结构呈现，样式交给CSS

「3. CSS」

CSS(Cascading Style Sheets)通常称为CSS样式表或层叠样式表(级联样式表)。

作用
- 主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)\图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。
- CSS以HTML为基础，提供了丰富的功能，如字体、样式、背景的控制及整体排版等，而且可以针对不同的浏览器设置不同的样式。

「4. CSS注释」

   Visual Studio Code 中快捷键为"Ctrl+/"

「引入CSS样式表」

「1.行内式(内联样式)」

通过标签的style属性来设置元素的样式

style其实就是标签的属性
样式属性和值中间是:
多组属性值直接用;隔开
只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余。
缺点:没有实现样式和结构相分离。

    <!-- <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名> -->
    <!-- 例如： -->
    <div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

「2.内部样式表(内嵌样式表)」

也称为内嵌式，将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。

style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
type=“text/css” 在html5中可以省略。
只能控制当前的页面
缺点：没有彻底分离结构与样式

<head>
<style type="text/CSS">
        选择器（选择的标签） {
    
          属性1: 属性值1;
          属性2: 属性值2; 
          属性3: 属性值3;
        }
    </style>
    </head>

「3.外部样式表(外链式)」

也称 $\color{red}{链入式}$ ，是将所有的样式放在一个或多个以 $\color{red}{.css}$ 为扩展名的外部样式表文件中，通过 $\color{red}{link}$ 标签将外部样式表文件链接到HTML文档中。

$\color{916DD5}{rel}$ :定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
$\color{916DD5}{href}$ :定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

 <link rel="stylesheet" href="index.css">

「基础选择器」

「CSS选择器的作用」

选择器(选择符)就是根据不同需求把不同的标签选出来，简单来说就是 $\color{red}{选择标签用的。}$

「CSS选择器」

$\color{red}{选择器}$ 分为 $\color{red}{基础选择器}$ 和 $\color{red}{复合选择器}$ 两个大类

基础选择器是由 $\color{red}{单个选择器}$ 组成的
基础选择器包括： $\color{red}{标签选择器、类选择器、id选择器}$ 和 $\color{red}{通配符选择器}$

①「标签选择器」

$\color{red}{标签选择器}$ （元素选择器）是指用 $\color{red}{HTML标签名称}$ 作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

$\color{1A6C12}{语法:}$
$\color{1A6C12}{使用范例:}$

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基础选择器之标签选择器</title>
    <style>
    /* 标签选择器 : 写上标签名 */
    p {
   
        color: green;
    }
    div {
   
        color: pink;
    }
    </style>
</head>
<body>
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
</body>
</html>

②「类选择器」

差异化选择不同的标签，单独选一个或者某几个标签时，选择 $\color{red}{类选择器}$ 。

$\color{1A6C12}{语法:}$

类选择器语法

$\color{1A6C12}{注意:}$

类选择器使用＂．＂（英文点号）进行标识，后面紧跟类名（自定义的）。
不要使用纯数字、中文等命名。
命名要有意义，尽量让别人一眼就能知道这个类名的目的

$\color{1A6C12}{使用范例:}$

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基础选择器之类选择器</title>
    <style>
        /* 类选择器口诀: 样式点定义  结构类(class)调用  一个或多个 开发最常用*/
      .red {
   
          color: red;
      }
      .star-sing {
   
        color: green;
      }
      .memeda {
     
         color: pink;
      }
    </style>
</head>
<body>
    <ul>
        <li class="red">冰雨</li>
        <li class="red">来生缘</li>
        <li>李香兰</li>
        <li class="memeda">生僻字</li>
        <li class="star-sing">江南style</li>
    </ul>
    <div class="red">我也想变红色</div>
</body>
</html>

「多类名」

给一个标签指定多个类名， $\color{red}{简单理解就是一个标签有多个名字}$ 。

类名之间用空格隔开
$\color{1A6C12}{使用范例:}$

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=`, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多类名的使用方式</title>
    <style>
        .red {
   
            color:  red;
        }
        .font35 {
   
            font-size: 35px;
        }
    </style>
</head>
<body>
    <div class="red font35">刘德华</div>
</body>
</html>

$\color{1A6C12}{多类名开发使用场景：}$

可以把一些标签元素相同的样式（共同的部分）放在同一个类里面。
这些标签都可以调用这个公共的类，然后再调用自己独有的类。
从而节省CSS代码，统一修
改也方便。

$\color{1A6C12}{类选择器命名规则：}$

|头 | 内容 |尾|导航|侧栏|栏目|页面外围控制整体布局宽度|左右中|登录条|标志|广告|页面主体|热点|新闻|菜单|menu|子菜单|
|–|–|–|–|–|–|–|–|–|–|–|–|–|–|–|–|–|–|–|–|–|–|
| header | content/container|footer|nav|sidebar|column |wrapper|left right center|loginbar|logo|banner|main|hot|news|submenu|download|subnav|
| 搜索 |友情链接|页脚 |版权|滚动 |内容 |标签页|文章列表|提示信息|小技巧 |栏目标题 |加入| 指南 | 服务| 注册 | 状态 | 投票|
|search|friendlink|footer|copyright|scroll|content |tab|list|msg |tips|title| joinus|guild |service|regsiter|status|vote

③「id选择器」

id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置id选择器ＣＳＳ中id选择器以＂＃＂来定义。
$\color{1A6C12}{语法:}$
$\color{1A6C12}{使用范例:}$

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基础选择器之id选择器</title>
    <style>
        /* id选择器的口诀: 样式#定义, 结构id调用, 只能调用一次, 别人切勿使用 */
      #pink {
   
          color: pink;
      }
    
    </style>
</head>
<body>
    <div id="pink">迈克尔·杰克逊</div>
    <div>pink老师</div>
</body>
</html>

④「通配符选择器」

在CSS中，通配符选择器使用＂＊＂定义，它表示选取页面中所有元素（标签）。

$\color{1A6C12}{语法:}$
通配符选择器不需要调用，自动给所有元素使用样式。

「基础选择器总结」

基础选择器总结

「复合选择器」

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

「1. 后代选择器」（也称作包含选择器）

用来选择元素或元素组的子孙后代
其写法就是把外层标签写在前面，内层标签写在后面，中间用「空格」分隔，先写父亲爷爷，再写儿子孙子。
子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。

父级 子级{
   属性:属性值;属性:属性值;}

.class h3 {
   color:red;font-size:16px;}

子代选择器语法

当标签发生嵌套时，内层标签就成为外层标签的后代。
子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。
$\color{1A6C12}{使用范例:}$


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复合选择器之后代选择器</title>
    <style>
        /* 我想要把ol里面的小li选出来改为pink */

        ol li {
   
            color: pink;
        }

        /* 中国 山东 济南 蓝翔 */
        ol li a {
   
            color: red;
        }

        .nav li a {
   
            color: yellow;
        }
    </style>
</head>

<body>
    <ol>
        变态写法
        <li>我是ol 的孩子</li>
        <li>我是ol 的孩子</li>
        <li>我是ol 的孩子</li>
        <li><a href="#">我是孙子</a></li>
    </ol>
    <ul>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li><a href="#">不会变化的</a></li>
    </ul>
    <ul class="nav">
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li><a href="#">不会变化的</a></li>
        <li><a href="#">不会变化的</a></li>
        <li><a href="#">不会变化的</a></li>
        <li><a href="#">不会变化的</a></li>
    </ul>

</body>
</html>

「2. 子选择器」

div>p{
   样式声明}

子元素选择器只能选择作为某元素子元素(亲儿子)的元素。
其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接
这里的子,指的是亲儿子。不包含孙子重孙子之类

$\color{1A6C12}{使用范例:}$

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复合选择器之子元素选择器</title>
    <style>
        .nav>a {
   
            color: red;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>

</html>

「3. 并集选择器」

如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。

任何形式的选择器（包括标签选择器、class类选择器 id选择器等），都可以作为并集选择器的一部分。
并集选择器通常用于集体声明，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为和的意思。

$\color{1A6C12}{使用范例:}$


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复合选择器之并集选择器</title>
    <style>
        /* 要求1: 请把熊大和熊二改为粉色 */
        /* div,
        p {
            color: pink;
        } */

        /* 要求2: 请把熊大和熊二改为粉色 还有 小猪一家改为粉色 */
        div,
        p,
        .pig li {
   
            color: pink;
        }

        /* 约定的语法规范,我们并集选择器喜欢竖着写 */
        /* 一定要注意,最后一个选择器 不需要加逗号 */
    </style>
</head>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>

</html>

「4.链接伪类选择器」

用于向某些选择器添加特殊的效果。写的时候，他们的顺序尽量不要颠倒,按照lvha的顺序。否则可能引起错误。

a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标移动到链接上
a:active 选定的链接

$\color{1A6C12}{使用范例:}$

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复合选择器之链接伪类选择器</title>
    <style>
        /* 1.未访问的链接 a:link  把没有点击过的(访问过的)链接选出来 */
        a:link {
   
            color: #333;
            text-decoration: none;
        }

        /*2. a:visited 选择点击过的(访问过的)链接 */
        a:visited {
   
            color: orange;
        }

        /*3. a:hover 选择鼠标经过的那个链接 */
        a:hover {
   
            color: skyblue;
        }

        /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
        a:active {
   
            color: green;
        }
    </style>
</head>

<body>
    <a href="#">小猪佩奇</a>
    <a href="http://www.xxxxxxxx.com">未知的网站</a>
</body>

</html>

「5.:focus伪类选择器」

:foucus伪类选择器用于选取获取焦点的表单元素。

焦点就是光标，一般情况类表单元素才能获取，主要针对表单元素来说。
$\color{1A6C12}{语法:}$

input:focus{
   
	background-color:yellow;
}

「6. 复合选择器总结」

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是空格 .nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是> .nav>p
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号 .nav, .header
链接伪类选择器	给链接更改状态		较多	重点记住 a{} 和 a:hover 实际开发的写法
:focus 选择器	选择获得光标的表单	跟表单相关	较少	input:focus 记住这个用法

「3.字体属性」

「1. font-size」

$\color{red}{font-size}$ 属性用于设置字号(字体大小)
谷歌浏览器默认的文字大小为 $\color{red}{16px}$
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。一般给 $\color{red}{body}$ 指定整个页面 $\color{red}{文字的大小}$ 。

单位

相对长度单位、绝对长度单位

相对长度单位	说明
em	相对于当前对象内文本的字体尺寸
px	像素，最常用，推荐使用
绝对长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

「2. font-family」

$\color{red}{font-family}$

最低0.47元/天解锁文章

(இωஇ)(*´I`*)

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础学习笔记

「学习笔记」CSS基础|前言仅供学习使用????????|CSS构造块「1. HTML的局限性」HTML满足不了设计者的需求，可以将网页结构与样式相分离，这样就可以在不更改网页结构的前提下，更换网站的样式。操作HTML属性不方便HTML里面添加样式带来的是无尽的臃肿和繁琐「2. CSS网页的美容师」让我们的网页更加丰富多彩，布局更加灵活自如。CSS最大的贡献：让HTML从样式中脱离，实现了HTML专注去做结构呈现，样式交给CSS「3. CSS」CSS(Cascading St
复制链接

扫一扫