CSS基础

最新推荐文章于 2024-07-15 14:54:05 发布

buildkay

最新推荐文章于 2024-07-15 14:54:05 发布

阅读量160

点赞数

分类专栏： CSS学习笔记文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_46926371/article/details/125912764

版权

CSS学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS（cascading style sheet）

层叠样式表。主要用来控制网页的样式和布局。她是一种能够让HTML标记和样式分离的语言。

分离就意味着能够更容易维护。

CSS基本语法

图形a{
  宽度:xxx;
    高度:xxx;
}
图形b{
  背景颜色:绿色;
}


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

选择器：告诉浏览器应该更改哪些元素。
声明：
- 属性：属性是CSS预先定义的样式，属性名由一个或多个单词组成。
- 值：定义属性对应的值。

注意：

每一个声明的后面要加上分号。
要有换行回车，保持代码美观。浏览器解释CSS的时候会忽略空格和回车。

标签选择器：

将HTML的标签名作为选择器。用来选择页面中所有这个名字的标签。

font-size属性：设置字体大小，单位px。

color属性：用来设置字体的颜色。

CSS的使用方式

内联方式（行内样式）

在HTML中使用style属性来设置css样式。

<标签名 style="属性1:值1;属性2:值2;......">标记的内容</标签名>

特点：仅作用于本标签。
内嵌方式：在head标签中使用style标签。

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

特点：作用于当前整个页面。

最后一个声明（属性:值）可以不加分号，但是强烈建议你加上。

声明css的时候，对于type属性而言，可加可不加`<style type="text/css">`。

外部链接：使用<link />标签导入。

使用<link />标签导入css文件。link导入、链接的文件不是HTML文档的一部分，但是可以供html文件使用。

link标签需要放在head标签中。

格式：<link href="xxx.css" type="text/css" rel="stylesheet"/>
- href属性，链接的文档来自哪里（要写个路径）
  - 链接的文档的扩展名为.css。
  - 你链接的这个.css的文件中不能包含其他代码，只能包含CSS代码。
- type属性：规定被链接的文档的文件类型。
  
  text/css，指的是你链接的文档是文本类型的css类型。
  
  大类型/小类型
- rel属性：relation关系，当前文档与被链接文档之间的关系。

以上三种方式，当样式冲突时，采用就近原则。那个属性离被修饰的内容近就用哪个。

CSS的特性

CSS层叠性：CS的样式允许重复声明，相互覆盖。
CSS继承性：被包含的元素拥有外层元素的样式效果。但是不是所有的属性都可以被继承。

CSS的注释符

/*
要注释掉的内容
*/
添加/删除注释：`ctrl+/`或`shift+alt+a`。

CSS选择器

标签选择器

也叫类型选择出器，直接使用HTML标签名。

*

通用选择器、通配符选择器，选择所有标签，他的目的是用来匹配所有标签，一般我们用它是初始化标签的默认样式。

类选择器

类：有相同特征的一类事或物。

物以类聚，人以群分。

类选择器使用：

在HTML标签上起一个名字名字需要使用class属性。
在css中使用.class的值作为选择器的名字来选中这一类标签。

注意：

一个标签也可以同时拥有多个类。
我们可以使用.类名1.类名2这种方式同时选中一个具有类名1和类名称2的元素。
可以使用标签名.类名的方式选择只具有某个类名的标签。

ID选择器

分配唯一的不重复的数值。作为一种标识。

步骤：

在HTML中使用ID属性给定个值。
在CSS中使用#id的值作为选择器。
同一个页面中要保证一个id的值只出现一次，如果同一个id的值出现多次你就用class。至于浏览器为啥能够解释id的值出现多次也行，那是浏览器行为。

<!DOCTYPE html>
<html>

<head>
    <style>
        #abc{
            color:red;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div id="abc">1</div>
</body>

</html>

组合选择器

可以使用一个组合选择器，就是将选择器使用逗号分隔开，达到同时选中的效果。

<!DOCTYPE html>
<html>

<head>
    <style>
        /* 
        需要选择div、.abc、#hululu给他们的颜色变为绿色。
        代码产生的冗余
        
         */
         div{
            color:green;
         }
         .abc{
            color:green;
         }
         #hululu{
            color:green;
         }
    </style>
</head>

<body>
    <div>hello world！</div>
    <b>哈哈</b>
    <span class="abc">123</span>
    <span>456</span>
    <p id="hululu">呼噜噜</p>
</body>

</html>


<!DOCTYPE html>
<html>

<head>
    <style>
         div,.abc,#hululu{
            color:red;
         }
    </style>
</head>

<body>
    <div>hello world！</div>
    <b>哈哈</b>
    <span class="abc">123</span>
    <span>456</span>
    <p id="hululu">呼噜噜</p>
</body>

</html>

后代选择器

后代包括儿子、孙子、重孙子、曾孙、玄孙。。。。。

E F，后代选择器，选择匹配的F元素，且匹配的F元素被包含在E元素内。

后代选择器中间需要有空格。

链接伪类选择器

伪：假的。

只针对HTML中的a标签，只有两种状态一种是已访问、未访问。

a:link，匹配a标签，这个a标签要定义href属性并且没有被访问过。
a:visited，匹配a标签，这个a标签要定义href属性并且已经访问过。

多个链接地址指向同一个地址，他也会受影响。

访问过后，浏览器中就存在历史记录了，实际上:link、:visited是通过历史记录来判断的。

如果要把历史记录清除掉可以使用ctrl+shift+del来清除。

动态伪类选择器

讲究的是动。

E:active，选择匹配的E元素，且匹配的元素被激活的那一刹那被选择。
E:hover，选择匹配的E元素，且用户鼠标指向的时候被选择。

其实:active和:hover不单单能用在a链接上面还可以用在其他元素上。

有可能在a链接上面同时使用link、visited、hover、active，那么这个时候要注意顺序： link->visited->hover->active

爱恨原则：LoVe/HAte。

link、visited：需要先没有访问过才能访问。

hover、active：需要先移动上去之后才能激活。

权重值

同一个元素有可能被多个选择器选择。他们的属性又产生了冲突，这个时候我们就需要计算权重值。

一个权重值由4部分组成：0,0,0,0

ID选择器：0,1,0,0
类、伪类选择器：0,0,1,0
标签选择器：0,0,0,1
通用选择器：0,0,0,0
行内样式：1,0,0,0

我们只有在写了一个属性不好使，但是我还能保证属性、选择器选择的没有问题。这个时候排错的第一个方向就应该是权重值。

数值越大权重值越大（从左到右开始比较的，只要左边的大那就不向下排列）。

权重值相同则最后一个样式胜出。

有一个关键字!important，用了它就不用比较权重值了，它获胜。在属性后面添加!important，这个东西少用。

div{
    color:purple !important;
}

!important少用，不是不用，他是尚方宝剑，只有确确定定确定用了他就一定要怎么怎么样的时候才用。

!important -> 权重值（才有权重值比较） -> 元素自身的默认样式 -> 继承下来的样式

<!DOCTYPE html>
<html>

<head>
    <style>
        /*权重第二 但是加了 !important  它好使。    对于#f的这个div来说他好使*/
        div {
            color: black !important;
        }
    /*权重最高*/
        #f {
            color: pink;
        }

        a {
            color: red;
        }
    </style>
</head>

<body>
    <div id="f"><!-- #f设置的东西将会被继承下来-->
        <!-- 我在这里先给a设置了样式，a还有默认样式，a还有继承下来的样式-->
        <a href="#">hello hello hello world</a>
    </div>
</body>

</html>

CSS属性

CSS中颜色的表示

颜色的关键字
6位十六进制的值。

6位分成三组（每组两个），分别代表红、绿、蓝比例。

如果每一组的两个值都相等的情况下可以进行简写。

#aabbcc，可以简写#abc

#aabbcd，不可以简写每一组的两个值都相等。
rgb颜色值：格式：rgb(红,绿,蓝)，值是0～255之间的值。

rgb(23,70,114)
rgba颜色值：格式：rgba(红,绿,蓝,透明度)，前面的值和rgb一样，但是多了个透明度，透明度是0~1之间的值，0表示完全透明，值越大透明度越低，1表示完全不透明。中间可以使用.n小数方式来表示透明度。

字体

字体是文字的外在形式，相当于文字的衣服。字体不同也会导致字体显示的不同。

windows中也安装了很多字体，放在C:\Windows\Fonts

字体组成

我们看到的字体很多不是单纯的字体，有可能是字体族（字体族是正常字体的变体，用来描述粗体、斜体等等）。

字体的类型

衬线字体，笔画开始、结束的地方都有额外的装饰，并且必须粗细有所不同。（宋体）
非衬线字体，没有额外装饰，笔画粗细差不多。(arial、微软雅黑)
等宽字体，针对于英文而言。每个英文字体占据同等的宽度。
手写字体
奇幻字体

设置字体系列

字体这种东西你用的是客户端字体。

font-family:字体名

注意：

设定的字体可以设定多个，多个字体使用列表方式表现出来（多个字体之间使用逗号分隔），浏览器根据这个列表从左到右查找字体，首先找到的就是用，如果没有找到继续向下找。
如果到最后都没有找到该字体将会使用浏览器设置的默认字体（chrome里面默认字体是微软雅黑）。
我们在用的时候一般情况下不会用字体的中文名字（会用字体的英文名字），这样是为了规避乱码风险。
用字体的时候如果字体的名字中间有空格那么我们就使用引号给它包起来。

'Apple LiGothic Medium'

设置字体大小

浏览网页的时候没有使用css设定文本大小，浏览器会使用默认的文本大小。一般浏览器默认字体大小是16px。所以也给它叫基准文本尺寸。

font-size

px，像素。

浏览器中的最小字号一般设置的是12px。

font-size:0是好使的。

默认字体16px，最小12px是浏览器设置，a自带的颜色是浏览器带的默认样式。

我们一般写0px、0%的时候直接就是写0（不加单位）。
em，相对于从父元素继承下来的大小来计算。
rem，他的值基于根元素（html）的文本尺寸来进行定义。

根元素的多少倍。

<!DOCTYPE html>
<html>

<head>
    <style>
        html{
            font-size:100px;
        }
        body{
            font-size:20px;
        }
        span{
            font-size:2em;
        }
        b{
            font-size:0.5rem;
        }
    </style>
</head>

<body>
    <!-- 20*2  -->
    <span>闫海静真英俊！</span>
    <b>闫海静真英俊！</b>
</body>

</html>

字体粗细

font-weight

normal，正常字体
bold，粗细。
100~900，通常字体或字体组映射了9级粗细程序。

当你设置值的时候有没有效果完全看是否安装了对应的字体（字体是否映射了9级的粗细程度）。

并且100~900没有固定的粗细，很有可能100、200、300是一样的，400、500、600是一样的，这个不是固定的值。（和使用的字体有关），规范里面说了只有后面的值不比前面的细就行。

一般来说400等于normal，bold通常是700。但是不一定。

字体的风格

font-style

normal，正常字体
italic，显示成斜体。

简写格式：

格式：font:style weight size family

font-style和font-weight是可选的，可写可不写！

font-size和font-family是必写的，并且size和family的顺序也不能变。

字体颜色

格式：color:value

单词
十六进制
rgb
rgba

字体下划线

text-decoration:value

none，标准的文本。
underline，下划线。
overline，上划线
line-throu，贯穿线，删除线。

可以使用多个值：可以使用text-decoration:underline overline line-through同时添加这些线。

字符间距

letter-spacing，定义字与字的距离。

normal，默认值。等同于letter-spacing:0
px，像素。

可以设置负数。
em，按照当前字体大小来进行计算。

缩进

格式：text-indent:value

px，像素。
em，相对于字体大小来进行设置。

只能用于行内块状元素和块状元素。

换行

white-space:value，用来了元素内的文本是否允许换行。
CJK（China、Japan、Korea）文本遇到容器边界会自动换行，非CJK不一定（word-break）。
normal，默认值。CJK（China、Japan、Korea）文本遇到容器边界会自动换行，非CJK不一定（word-break）。
nowrap，不换行(不管是中文还是英文都不会换行)。
word-break，用来控制单词内怎么断词。
normal，默认值。
break-all，使换行出现在任何字符之间（主要针对英文）。

隐藏内容

格式：overflow:value

visible，超出的内容是可见的。
hidden，超出元素框的内容隐藏起来。
scroll，超出的内容以滚动条方式显示。

内联盒子模型

块元素里面通常放置的是一行一行的内容（行内元素），内联盒子模型决定了这一行一行的行内元素应该怎么摆放。

<p>闻名于世的马有很多例如楚<i>霸王</i>的乌骓</p>

上面的代码会解释称3个内联盒子：

内联盒子的类型：

如果这个内容被行内元素所包裹，那么这个内联盒子属于具名内联盒子。
如果说只是光秃秃的文字，则属于匿名内联盒子。

每一个内联盒子由三部分组成：一个内容区放置具体内容，上下有等距的空白（叫上下半行间距）

行框盒子：每一行是一个行框盒子，行框盒子是一个一个的内联盒子构成的。

行框盒子需要包裹住每一行里面的所有的内联盒子，不管你有多大，也不管你有多小。

行高

撑开元素高度的不是内容而是内容所属的行高。

格式：line-height:value，定义行高。

normal，默认值。浏览器自己设置。
px，像素值

我们一般用是用在块元素上，当line-height用在块元素上时表示的是每行（行框）的最小高度。
可以用数值来表示（不带单位的），当不带单位的时候他会根据元素的font-size的大小来计算，是当前font-size的多少倍。

20 × 1.5 = 30px;

<!DOCTYPE html>
<html>

<head>
    <style>
        div{
            width:800px;
            line-height: 30px;
            border:1px solid green;
        }
    </style>
</head>

<body>
    <div>闻名于世的马有很多例如楚霸王的乌骓、
    关羽的<i style="font-size:100px;line-height: 2;">赤兔</i>
    都是和历史风云人物有着密切关系而且成为主人得力干将的宝马，当然它们自身也
    都拥有非凡的风采，而下文这匹马的闻名却更多的是因为它超高的颜值。</div>
</body>

</html>

上面所说的就是line-height的第一个功能调整行与行之间的距离。

在不设置块状元素的高度的情况下，line-height改变会撑高盒子的高度，并且内容始终会垂直居中与盒子。而且该盒子的高度与行高是相同的。

假如我设置了元素的高度，那行高和高度设置的一样的值，将会使用文字垂直居中。

也就是如果一行文字要垂直居中的话，可以设置他的行高和元素的高度相等。（只能使单行的文字垂直居中）

<!DOCTYPE html>
<html>

<head>
    <style>
        div{
            /* line-height: 30px; */
            height:500px;
            line-height: 500px;
            border:1px solid green;
        }
    </style>
</head>

<body>
    <div>闻名于世的马有很多例如楚霸王的闻名于世</div>
</body>

</html>

当设置了块状元素高度的情况下，line-height改变不会改变盒子的高度，只会改变文字在垂直方向上的位置。

<!DOCTYPE html>
<html>

<head>
    <style>
        div{
            /* line-height: 30px; */
            height:500px;
            line-height: 30px;
            border:1px solid green;
        }
    </style>
</head>

<body>
    <div>闻名于世的马有很多例如楚霸王的闻名于世</div>
</body>

</html>