CSS基础学习笔记

最新推荐文章于 2024-10-04 22:03:04 发布

Franke_Max

最新推荐文章于 2024-10-04 22:03:04 发布

阅读量582

点赞数 3

文章标签： css 学习笔记

本文链接：https://blog.csdn.net/2301_77892587/article/details/142686646

版权

CSS基础学习笔记

元素表达语义，样式使可变的

不需要记，但是需要时刻记着查css的文档

CSS

cascading style sheets

层叠样式表

用于定义网页样式和布局的样式表语言，用于指定页面中各元素的字体，大小，间距等

内部样式表（选择器）：样式表保存在style样式中
内联样式表：在标签中使用style属性
外联样式表：引入为外部的css文件

外联样式表的引入：<link>标签在<head>内引入

语法结构（选择器）

CSS通常由选择器、属性和属性值组成，多个规则可以组合在一起，同时应用多个样式。

类名是自定义的。

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

选择器的声明可以写无数条属性
声明的每一行属性都需要以英文分号结尾
声明的所有属性和值都以键值对形式出现。
选择器：选择要应用样式的标签

<!--p标签选择器-->
p
{
    color:blue;
    font-size:16px;
}

选择器类型：

元素选择器
类选择器：根据类名选择
ID选择器：根据ID选择
子元素选择器
通用选择器
后代选择器（包含选择器）
并集选择器（兄弟选择器）
伪类选择器
标签属性选择器

<!-- 元素选择器 -->
<!--对所有h1标签选择-->
<style>
    h1
    {
        color:yellow;
    }
</style>

<!--类选择器-->
.类名
{

}
<!--id选择器-->
#ID名
{

}
<!--通用选择器，选中所有元素-->
*
{

}

<!-- 标签属性选择器 -->

标签[属性]{

}

<!--子元素选择器-->
<style>
    .father>son
    /*用类名，标签名，ID都可以，能选中就行*/
    {

    }
</style>
/*后代选择器，比子代级别更低的标签*/
<style>
    .father grandson
    {

    }
</style>

/*兄弟选择器,紧跟在该元素之后的同级元素（与+后的标签同级）*/
<style>
    h3+p
    {

    }
</style>

/*伪类选择器，用户交互等*/

<style>
    #element:hover
    {
        ...
    }
</style>

/*伪元素选择器，创建虚拟元素并样式化*/

<div class="father">
    <p class="son></p>
    <div>
        <p class="grandson"></p>
        </div>
</div>

<p>这是一个普通的p标签</p>
<h3>这是一个兄弟选择器</p>
<p>另一个p标签</p>

<h3 id="element">这是一个伪类选择器</h3>

常见元素属性

给选中的元素定义样式，可以用选择器，也可以用style属性对单个标签样式化

复合属性：一个属性设置多个样式

<h3 style="font: bolder 50px 'KaiTi';">这是一个复合属性</h3>

行内块元素

水平方向上排列，但是可以设置宽度、高度、内外边距等块级元素的属性。

可以包含其他行内元素或块元素

<div>块元素，自动换行</div>
<span>行内元素，只能在一行中，不能独占一行</span>
<img>/*行内块元素，可以在一行出现多个*/

使用dispaly属性可以将行内元素、块元素、行内块元素转换

常见属性

1. line-hight：设置行高

常见样式声明

color：元素内部的文字颜色

1. 预设值：定义好的颜色名称

2. 使用色值：

rgb表示法：
hex表示法：

常见颜色的色值：


淘宝红：#ff4400,#f40
黑色：#000000, #000
白色：#ffffff, #fff
红色：#ff0000, #f00
绿色：#00ff00, #0f0
蓝：#0000ff, #00f
紫：#f0f
青：#0f
黄：#ff0
灰色：#ccc

background-color：背景颜色

与color使用方式相同

font-size：元素内部文字的大小

1. 单位

px：像素
em：相对单位，相对于父元素的字体大小，没有设置字体大小会继承父元素的字体大小，层次结构表示继承关系

每个元素必须有字体大小，如果没有声明字体大小，则直接使用父元素的字体大小。没有父元素，则使用基准字号（浏览器里设置的字号）

user_agent：用户代理，即浏览器的设置，会各种标签进行默认样式的设置，具有默认css样式

font-weight：字体的粗细程度

font-weight: bold加粗；font-weight: normal不加粗

font-family：文字类型

微软雅黑，黑体……

需要用户电脑上有改字体，可以使用多个字体：

<style>
    div
    {
        font-family: consolas,微软雅黑,Arial,san-serif/*(非衬线字体，万能的)*/
    }

非衬线字体：字体边缘没有经过修饰
衬线字体：宋体等，打印好看

san-serif：电脑自行选择一个非衬线字体

font-style：字体样式

normal：正常

比如字体的倾斜(italic)，但有的字体可能不支持该方式

<i>元素：默认样式为倾斜字体，对于语音有影响，通常用它来表示图标
<strong>元素：加粗，重要的，不能忽略的内容
<em>元素：表示强调，默认斜体

text-decoration：文本样式

文本修饰，给文本加线

del元素：废弃的内容
s元素：过期的内容

<del>章</del>口就来
html已不再使用<s>块级元素</s>

text-indent 首行缩进，可以使用像素，或者字符个数

line-height：行高

每行文本的占据的像素，是容器的高度，可以用来实现文本垂直居中

对于单行文本垂直居中，使用像素

对于多行文本，使用纯数字

width：宽度，hight：高度，letter-spacing文字间隙

letter-spacing：单词，单字之间的间隔

text-align：元素内部文字的水平排列方式

居中，靠右，靠左。

选择器

选择器：精准地选中元素

ID选择器

元素选择器

类选择器

通配符选择器

*
{

}

属性选择器

根据属性选择标签

/*选择所有具有href属性且值为`http://...`的标签，可以不加值*/
[href="http://..."]

伪类选择器

选中某些元素的某种状态

/*选中鼠标悬停时的a元素*/

a:hover{

}

/*选中鼠标按下时的a元素*/
a:active{

}

/*未访问的链接*/

a:link{

}

/*已经访问过的*/
a:visited{

}

以上四个伪类的书写顺序：link,visited,hover,active

伪元素选择器

生成一个子元素并选中，且该子元素一定为第一个

/*
span:before{
content:"《"
}

选择器的组合

并且：多个选择器不加任何符号连接，直接放在一起
后代元素：两个选择器之间加空格a.red .blue{}
子元素：>
相邻兄弟元素：+
兄弟选择器：~

选择器的并列

多个选择器，用逗号分隔

语法糖：用于减轻写代码的负担

层叠冲突

声明冲突：同一个样式，设置多个不同的值，多次应用到同一个元素

层叠：解决声明冲突的过程，浏览器自动处理

第一步、比较重要性

作者样式表的important元素：

作者样式表指开发者写的样式表
important元素指加了!important的元素

重要性顺序：

作者样式表中的!important样式
作者样式表中的普通样式
浏览器默认样式表中的样式

第二步、比较特殊性

看选择器

1. 总体规则：该样式在选择器选中的范围越窄，越特殊

2. 具体规则：通过选择器，计算一个4位数，比较四位数的大小

内联样式最特殊

千位：如果是内联样式，记作1，否则记作0。
百位：等于选择器中所有ID选择器的数量。
十位：等于包含该样式的所有选择器中类选择器，属性选择器，伪类选择器的总数
等于选择器中所有元素选择器、伪元素选择器的总数

第三步、比较代码出现的次序

当使用前两种方式都无法解决时，则按照样式代码出现的顺序，使用后出现的样式设置

应用

1. 重置样式表

覆盖浏览器的默认样式，使得在各浏览器中显示效果相同，然后再根据需要重写样式。

2. a标签的伪元素选择器书写顺序

继承

子元素会继承父元素的某些css属性。通过将样式写在父元素上，子元素通过继承使用父元素的某些样式

<style>
    div
    {
        color:red;
    }

<body>
    <div class="container">
        <ul>
            <li></li>
        <ul>
    </div>
<body>

<div>标签下的所有元素的字体颜色都是红色

通常，跟文字内容相关的属性都能继承

简写属性，同时设置多个属性

不可继承的属性

background不可继承

属性值的计算过程

一个一个元素依次渲染

顺序按照文档的树形结构的顺序，从树形目录的根节点开始渲染

渲染每个元素的前提条件：该元素的所有css属性必须有值。

从所有属性都没有值，到计算出所有属性值，才能显示

CSS属性值计算过程

确定声明值：没有冲突的css属性的值先确定
层叠冲突：对样式表有冲突的声明使用层叠规则，确定CSS属性
使用继承：若仍存在没有值的属性，可以继承的属性，则继承父元素的值
使用默认值：对仍然没有值的属性使用默认值。

1. 强制继承

对于希望继承父元素的值，但是在前两步可以确定元素值时，可以使用强制继承。也可以使，强制继承不可继承的属性值

a
{
    color:inherit
    /*强制继承*/
}

2. 特殊的CSS取值

inherit: 手动继承
initial: 初始值，强制将该属性的值设置为默认值

盒模型

文档中每个元素都是一个盒子( 一个矩形区域 )

盒子类型：

行盒: display属性值等于inline的元素
块盒：display属性值等于block的元素

行盒在页面中不换行，块盒独占一行

浏览器默认样式表中设置为块盒: 容器，h1~h6,p
常见的行盒：span, a, img…

盒子的组成部分

从内到外

内容: content
填充: padding 盒子边框到内容的距离
边框: border
外边距: margin 盒子与盒子之间的距离

盒子模型的属性( 同时设置多个值，简写属性 )：

属性名	描述
`Content`	盒子包含的实际内容
`Padding`（内边距）	内容与边框之间的部分
`Border`	盒子的边界，在内边距外部
`Margin`（外边距）	围绕在边框的外部，盒子与其他元素之间的空间

后三个属性是复合属性

1. 内容区属性
width, height设置的是盒子内容部分的宽高

2. 填充区属性
padding-left, padding-right,padding-top, padding-bottom.

设置的都是填充部分的大小

填充+内容=填充区 。

3. 边框属性（简写属性）

border-style（边框样式）, boder-color（边框颜色）, border-width（边框宽度）

边框颜色默认为字体颜色

4. 外边距

margin: 简写属性，直接设置上下左右的margin大小

盒模型的应用

改变宽高范围

1.默认情况下, width和height设置的是内容盒宽高。

hight与ling-hight的区别

直接量的是边框盒的宽高

2. 解决方法

使用box-sizing属性，属性值设置为border即可实现设置的尺寸为边框盒的宽高

背景覆盖范围

默认背景覆盖边框盒

background-clip: 使背景覆盖范围改变

溢出处理

overflow属性(x,y两个方向)解决

hide
scroll( 滚动条)
auto( 自动处理)

断词规则

word-break: 文字显示不下时，如何换行

normal: 普通。CJK字符（文字间位置截断）, 非CJK字符（在单词结束时断行）
break-all: 截断所有。在文字处截断。
对于非CJK字符，会在单词中截断
keep-all: 在单词间截断（空格处）

空白处理

对单行文本实现显示不完的内容用.代替

<style >
    li{
        border-bottom
        line-height
        padding-left
        ...
        white-space: nowrap
        overflow: hidden
        text-overflow:ellipsis
    }
...

行盒

1.特点

盒子沿着内容延申
行盒设置宽高只改变背景的宽高，不影响content的大小，对其他元素的排列没有影响
内边距：水平方向有效，垂直方向不会占据实际空间，只改变背景
边框：水平方向有效
外边距：水平方向有效

总结：行盒只有水平方向的设置影响其他元素排列

2.行块盒

同时具有行盒和块盒的特点，但是不会独占一行，可以设置宽高。

display:inline-block

做分页（浏览器第一页，第二页……）

空白折叠，发生在行盒（行块盒）内部或行盒（行块盒）之间

3. 可替换元素和非可替换元素

大部分元素，页面上显示的结果取决于元素内容，称为非可替换元素

少部分元素，页面上显示的内容取决于元素属性，称为可替换元素

绝大部分可替换元素都为行盒，类似于行块盒，可以设置四个方向的大小

视觉格式化模型

页面中多个盒子的排列规则

排列方式：常规流，浮动，定位

常规流

所有文档默认情况下都是常规流，文档流

总体规则：块盒独占一行，行盒水平依次排列

包含块：每个盒子都有它的包含块，包含块决定了盒子的排列区域。

绝大部分元素的包含块为其父元素的内容盒

移动父元素时，子元素的位置相对于父元素不变

子元素充满其包含块

1. 块盒默认情况下

水平方向
每个块盒的总宽度必须刚好等于包含块的宽度。

width默认为auto, 占据剩余宽度

margin的默认值为0。若宽度，边框，内边距计算完后仍为占满包含块，则margin-right占满所有剩余空间

margin设置auto，表示占据剩余空间，且左右平均。

通过给margin赋负值，可以使子元素在显示上超出父元素的content
每个块盒垂直方向上的auto值

height: 适应内容的高度，无内容则height值为0

margin: 表示0
百分比取值

padding,width,margin的取值可以去百分比，是相对于包含块的宽度

高度的百分比：包含块的高度与子元素无关，则百分比相对于包含块的高度；若有关，则百分比不可用。
相邻margin合并

两个常规流块盒，相邻margin会合并，取两个margin的最大值