10.CSS学习（一）

Kylincsg

已于 2024-04-03 15:39:55 修改

阅读量915

点赞数 21

分类专栏：从零教你学Web前端文章标签： css 学习 tensorflow 笔记经验分享交互 scss

于 2024-01-23 11:16:57 首次发布

本文链接：https://blog.csdn.net/Kylincsg/article/details/135766353

版权

从零教你学Web前端专栏收录该内容

68 篇文章 0 订阅

订阅专栏

上一章我们学完了HTML结构，接下来我们开始CSS的学习吧！

CSS（cascading style sheet），层叠样式表，主要用来控制网页的样式和布局。css2.1。

css基本语法

__选择-》改变__就是CSS的语法。

2个女朋友
女朋友1{
	头发:波浪
}
女朋友2{
	眼睛:开眼角
}

选择器（选择）：告诉浏览器应该将哪些样式作用于页面中的哪些元素。
声明：告诉浏览器要修改指定的元素的哪些属性。
- 属性：是CSS预定义的选项。属性名由一个或多个单词组成。
- 值：将指定的属性设置为某个值。

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


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

__注意： __

每个属性/值他们是成对出现的。一对数据后面要加上分号。
键值对不要横着写。

HTML选择（标签选择器），将HTML标签名作为选择器来使用。
font-size:value，设置字体大小，单位px。
color：格式：color:颜色值，设置字体的颜色。

CSS中的颜色

十六进制的数字。（6位16进制的数字，分成了3组，红、绿、蓝），可以进行缩写。

每一组值都相同的情况下，可以进行缩写颜色的值。

#6600ff，#60f

#CC4400，#C40

#C34400，不可以缩写。
rgb颜色值。格式：rgb(红,绿,蓝)，红绿蓝三种颜色取值范围是0~255。
rgba颜色。格式：rgba(红,绿,蓝,透明)，和rgb颜色是相同的，但是多了一个透明度。透明度0~1之间的值。0位完全透明，值越大透明度越低，0.5可以写为.5
颜色的关键字。red blue green white yellow pink black orange purpal yellowgreen skyblue

CSS的使用方式

内联方式，在HTML标签中使用style属性来设置CSS样式。

格式：<标签名 style="属性1:值1;属性2;值2...."></标签名>

特点：仅仅作用于本标签。
内嵌方式：在head标签中使用style标签。
```
选择器{
	属性1:值1;
    属性2:值2;
    .....
    属性n:值n;
}
```
特点：作用于当前整个页面。
- 声明css时在style标签中不需要type属性了（早期需要），它的意思是指明这个style标签中内容的类型。
  
  MIME类型。
- 最后一个属性:值这样的一对规则可以不用加分号。但是强烈建议你加上。
外部导入方式

格式：<link />

使用<link />导入CSS文件，作用于本页面。通过link标签链接的样式表虽然不是HTML文档的一部分，但是却可以供文档使用。

格式：<link href="文件名.css" type="text/css" rel="stylesheet"/>
- href属性：链接的文档来自于哪里。
  - 在链接的文档中只能写CSS代码。
  - 链接的文件需要扩展名是.css。
- type属性：规定被加载的文件的数据类型。（type属性同样也可以省略。）
- rel属性：(relation，关系)，当前文档和被引入的文档之间的关系
同一个CSS可以被多个HTML文件所使用。

CSS，层叠样式表。（选中，再修改。）

三种方式选中同一个元素，而且选择器还一样。这个时候谁生效的问题，就近原则，谁近谁生效。（但是最终的原因还是因为层叠了—覆盖了。）

CSS特性

CSS层叠性：CSS样式允许重复声明，但是可以相互覆盖。
CSS继承性：被包含的内部元素拥有外部元素的一些样式效果。（有些属性可以被继承，有些属性不能被继承）

CSS的注释符

/*要注释的内容*/

#
//
<!-- -->
/**/

选择器

标签选择器，也称为类型选择器，直接使用HTML的标签名。
*，通用选择器，选择文档中所有的HTML标签。
类选择器.className

在CSS中使用：类选择器以一个.作为前缀开头，然后跟随一个自定义的类名。类型选择器能够选择不同的元素。让不同的元素拥有相同的样式。

在HTML中定义：在HTMl中需要给标签定义class属性。

有相同特征的一组事物的统称。男人、女人、电脑

注意：
1. 类名严格区分大小写。
2. 可以使用标签名.类名选择只具有类名的标签。
3. 一个标签中可以有多个类名。
  
  <span class="a b">hello world</span>
4. 在CSS中使用时可以将两个或两个以上的类选择器合并，查找同时具有这些类名的标签。
  
  多个类选择器即使顺序不同也可以生效。
```
<!DOCTYPE html>
<html>

<head>

    <style type="text/css">
    .a.b{
        color:red;
    }
    </style>
    
</head>

<body>
    <span class="a b">hello world</span>
    <div class="a b c">hello world</div>
    <div class="a">hello world</div>
</body>

</html>
```

ID选择器

在HTML标签中使用id属性，在CSS中#ID的值来进行选择。

ID本身具有唯一性，相当于身份证。一个HTML文档中一个ID的值能且只能使用一次。

类选择器相当于名字，ID选择器相当于身份证。

组合选择器

选择器1,选择器2,选择器3......选择器n

后代选择器

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

后代选择器两个选择器之间必须以空格隔开，中间不能有其他符号。
后代选择器两个选择器之间的层级间隔可以是无限的。包括子元素、孙子、重孙子、玄孙。。。。

链接伪类选择器

链接伪类选择器只能用于HTML中的a标签：两种状态一种：已经访问、未访问。

a:link，没有被访问过。（具有href属性）

a:visited，已经被访问过。（具有href属性）

访问过后就存在缓存中了，再打开也是访问过，但是不同的浏览器有不同的缓存。

动态伪类选择器

E:active，选择匹配的E元素，且匹配的E元素被激活那一瞬间。

E:hover，选择匹配的E元素，且用户鼠标停留在上面的时候被会触发。

注意：在a链接上使用链接伪类选择器和动态伪类选择器时候要注意书写顺序（link->visited->hover->active）要遵守一个爱恨原则（LoVe/HAte）

权重值

同一个元素有可能会被多个选择器选择，然后他们又应用了相同的规则（多个选择器之间的规则就产生了冲突），这个时候需要计算权重值。

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

数值越大，权重越高。
权重高的将会获胜。权重值如果相同最后一个胜出。
如果要忽略权重值时，需要在要保护的属性后面加上!important，这样可以不去计算权重让其直接生效。但是这个 !important能少用就少用。

字体

字体

字体的风格、字体的衣服。外在的形式特征。

一个字体：
- 字体设计师需要一些设计。
- 制作以人员一笔一划的制作、修改
- 开发人员进行编码，添加程序
- 测试人员校对
- 生产部门包装、上市。
windows中的字体C:\Windows\Fonts
字体的组成

我们通常所说的字体可能不单纯，它有可能有字体的多个变形组成用来描述粗体、斜体、正常等等。所以我们电脑中安装的字体有可能是一个字体族。
字体的种类：

字体有很多类：
- 衬线字体，笔画开始、结束的地方有额外的装饰，笔画粗细会有不同。
- 非衬线字体，没有额外的装饰，笔画粗细差不多。微软雅黑
- 等宽字体，针对于英文而言的，等宽字体每个英文字符占据同等的宽度。i M 占据等同的宽度。
- 手写字体
- 奇幻字体

设置字体系列

格式：font-family:value（可继承）

__注意： __

常用字体、宋体、微软雅黑。常见的字体虽然可以使用中文进行设置，但是我们一般都会使用英文。规避乱码
如果说设定的字体名字包含空格应该使用引号包起来。
可以定义多种字体。用户浏览器逐个去检查是否有该字体，如果没有就找下一个看有没有，直到找到某个字体。font-family: yanhaijing,'Source Code Pro';
多个字体时一直找到最后都没有这个字体使用默认字体。

<!DOCTYPE html>
<html>

<head>
    <style>
        html{
            font-size:200px;
        }
        body{
            font-size:100px;
        }
        div{
            /* font-size:0.5em; */
            font-size:0.5rem;
        }
    </style>
</head>

<body>

    <div id="a" class="b" >I Love you</div>
</body>

</html>

字体粗细

格式： font-weight:value

normal，正常字体
bold，粗体。
bolder，更粗。
lighter，更细。
100~900，使用100~900作为关键字通常这些字体映射了9级的粗度。

100~900有没有效果要看这个字体是否安装了各种字体的变体。也就是是否完全映射了9级字体粗度。

这些字体的粗细本身没有固定的粗细很有可能100_{300一样，400}600一样等等。因为在CSS规范当中规定只要一个关键字对应的变形不比前一个关键字对应变形更细就可以。
- 通常400等于normal。
- bold等于600。
- 其他关键字完全看是哪种字体。
字体中没有设定粗体，但是依然能够用是因为浏览器自动计算，然后给两侧增加像素。

斜体

font-style：value

normal，默认字体。
italic，显示成斜体。

字体简写格式

格式：font:font-style font-weight font-size font-family

一定要有字体大小与字体主题,且size在family前面

style和weight顺序可以颠倒。
size和family的顺序不能颠倒并且font声明中必须有这两个值。

字体颜色

格式：color:value

字体下划线

text-decoration:value

none，标准的文本。
underline，下划线。
overline，上划线
line-through，中横线。

字符间距

letter-spacing:value

normal，等同于letter-spacing:0;
px，像素

line-height 行高

vertical-algin 设置垂直对齐方式

盒子模型的基本元素（最基本的东西）

width，设置元素的宽度
height，设置元素的高度，单位是px
background-color，元素的背景颜色。
border，边框：1px solid green;

元素的显示模式

块级元素（block）
- 独占一行，元素的前面和后面都会有一个换行。多个块级元素会各自新起一行。默认情况下块级元素的宽度会填满其父元素的宽度。
- 块级元素可以设置宽度和高度，即使设置了宽度和高度，仍然是自己独占一行。
  
  常用的块级：div、h1~h6、p、ul、ol、li。
- 块元素不设置宽度的情况下，会使用父元素的宽度填满，人为设置你可以设置为自己的大或小。
  
  块元素可以设置的比父元素的宽度、高小，也可以设置的比父元素的宽、高大。
行内元素、内联元素（inline）
- 不会自己独占一行，多个相邻的行内元素会排列在同一行里，直到一行里面放不下，才会进行换行。它的宽度随内容的多少而变化。
- 行内元素设置宽度和高度是无效的。
  
  常用的行内元素：span、b、strong、i、em、u、ins、s、del、a等等
  
  行内元素支持包裹文本没有宽度。
内联块级元素（inline-block）

即可以设置宽度和高度还能够水平排列。

常用元素：img、表单元素。
更改显示的类型

格式：display:值
- block，显示为块级元素。
- inline，显示为行内元素
- inline-block，显示为内联块级元素
- none，隐藏元素。
问题分析：HTML标签中换行回车当做一个空格，所以行内元素中间会有空白。

解决方法：
1. 将源代码中后面的回车都删掉（这样不太合适），让他们排在一行。
2. 将其父元素的font-size设置为0px。
文本缩进

text-indent不能用在行内元素上。

格式：text-indent:value

px，像素。负数也可以。
em，相对于从父元素继承下来的大小进行计算。

__注意： __

text-indent不能用在行内元素上应该用在块级元素和行内块级元素上。
文本缩进只会影响元素的第一行。

换行

格式：white-space:value，用来处理元素内文本是否允许换行。

normal，默认值。CJK文本遇到容器边界自动换行。非CJK文本由word-break的值决定。

CJK，指的就是中文（china）、日文（Japan）、韩文（korea）。
nowrap，超出容器边界不进行换行。

格式：word-break，用来表明怎么进行单词内的断句。

none，根据浏览器及默认设置来决定是否进行换行。
break-all，换行出现在任何字符之间。

隐藏内容

格式：overflow:hidden

visible，超出元素框的内容是可见的。
hidden，超出元素框的内容被隐藏。
scroll，多余的内容出现滚动条。
auto，自动，浏览器自己确定，但是通常具有不确定性。

水平对齐

text-align:value

left，左对齐
right，右对齐
center，中间对齐。

注意：

text-align用在块状元素或行内块状元素。
text-align对 __块状元素或行块状元素 __ 中的 行内元素或行内块状元素 生效。

问题

手慢
写的时候你不知道从哪里开始。

万事开头难
1. 一定要知道自己在干什么。想干什么
2. 怎么干成。（不要写代码靠运气）

关于继承和自身的默认属性

a标签：a标签默认对字体颜色进行了设置。所以会覆盖掉继承下来的颜色。

<!DOCTYPE html>
<html>

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

<body>
    <div>
        123
        <a href="#">abc</a>
    </div>
</body>

</html>

h标签默认对字号进行了设置，所以会覆盖继承下来的字号。

<!DOCTYPE html>
<html>

<head>
    <style>
       /*  div{
            color:red;
        } */
        div{
            font-size:20px;
        }
    </style>
</head>

<body>
  <!--   <div>
        123
        <a href="#">abc</a>
    </div> -->

    <div>
        <h1>今天天气真好!</h1>
        今天天气就是很好。
    </div>
</body>

</html>

下一篇：11.CSS学习（二）

🌸友情推荐：全栈大佬笔记 Android领域肥宅

Kylincsg

关注

21
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
10.CSS学习（一）

css基本语法CSS中的颜色CSS的使用方式CSS特性CSS的注释符选择器ID选择器组合选择器后代选择器链接伪类选择器动态伪类选择器权重值字体设置字体系列字体大小字体粗细斜体字体简写格式字体颜色字体下划线字符间距元素的显示模式文本缩进换行隐藏内容水平对齐问题关于继承和自身的默认属性
复制链接

扫一扫