CSS基础知识

概述

定义

CSS指的是层叠样式表(Cascading Style Sheets),是一种用来描述HTML文档样式的语言(给页面中的html标签设置样式)。

语法

CSS的语法规则是由选择器声明块进行组成的。选择器 { 属性名: 属性值; } 如p { color: green;}

选择器指向需要设置样式的HTML元素,声明块表示包含一条或多条声明(声明块用花括号包裹)。每条声明都包含一个CSS属性和一个值,以冒号分隔。多条CSS声明之间用分号分隔。

p {
    color: red;
    text-align: center;
}

上面代码中,表示所有的p元素都将居中对齐,且文本内容为红色。

引入方式

共有三种使用CSS的方法,分别如下:

  • 行内样式:作用于单个标签;直接给html标签添加style属性
  • 内嵌样式:作用于单个页面;写在style标签内,style标签在head标签中
  • 外联样式:单独的.css文件,通过link标签进行引入
<!-- 外联样式 -->
<!-- h1 {color: red} -->
<link rel="stylesheet" href="default.css">
<!-- 内嵌样式 -->
<style>
h1 {
    color: blue;
}
</style>
<!-- 行内样式 -->
<h1 style="color: skyblue">测试CSS三种使用方法</h1>

选择器

作用

选中页面中对应的标签,方便后续更改样式(先找后改

分类

标签选择器

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

通过标签名找到页面中所有这一类的标签,设置样式。

p {
    color: red;
}

不论标签嵌套层级多深,都会将一类标签添加样式

类选择器

类名 { 属性名: 属性值; }

找到页面中所有带有该类名标签,设置样式

/* 给所有class类名为center的标签添加居中样式 */
.center {
    text-align: center;
}

一个标签可以有多个类名,类名之间使用空格隔开;css结构可以同时选择多个类使用,隔开(多对多)

id选择器

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

找到页面中带有id名标签,设置样式

#main {
    color: blue;
}

一个页面中只能有一个(一对一)

通配符选择器

* { 属性名: 属性值; }

找到页面中所有的标签,设置样式

* {
    margin: 0;
    padding: 0;
}

大型项目中,一般不使用,可能会比较消耗浏览器的性能

https://www.w3school.com.cn/css/css_selectors.asp

字体

设置字体的样式,用font表示

字体类型

名称 作用
font-size 字体大小
font-weight 字体粗细
关键字:normal正常;bold加粗
纯数字:400正常;700加粗
font-style 字体样式(normal正常 italic倾斜)
font-family 字体类型
<head>
    <title>字体和文本样式</title>
    <style>
        .one {
            font-size: 20px;
            font-weight: bold;
            font-style: italic;
            font-family: 'Courier New', Courier, monospace;
            /* 样式生效 */
            font-weight: normal;
        }
        .two {
                font: italic bold 20px 'Courier New', Courier, monospace;
            }
    </style>
</head>
<body>
    <div class="one">这是第1个句子</div>
    <div class="two">这是第2个句子</div>
</body>

存在的问题

  • 层叠问题:当一个选择器内设置了多个同名属性的样式,最底下的样式生效
  • 连写问题
    • 连写的顺序:font: style weight size family (swsf 稍微舒服)
    • 可省略的选项:前两个可以省略 [style weight] size family

背景属性

设置背景样式,用background表示

名称 作用
background-color 背景颜色(颜色常见的几种表示)
background-image 背景图片:url(图片路径)
background-repeat 背景平铺
repeat 平铺
no-repeat 不平铺
repeat-x 沿着水平方向平铺
repeat-y 沿着垂直方向平铺
backgroup-position 背景位置
方位名词(最多只能表示9个位置 九宫格) 水平方向: left center right 垂直方向: left center right
数字+px(坐标) 在一个块级元素中,元素的左上角为原点(0,0),水平向右是x轴,垂直向下是y轴。由此组成的一个二维坐标系进行设置。
<head>
    <style>
        .one {
            width: 500px;
            height: 500px;
            background-color: red;
            background-image: url(../../static/img/small.jpg);
            background-repeat: no-repeat;
            /* background-repeat: repeat-y; */
            /* background-position: left center; */
            background-position: 20px 0;
        }
    </style>
</head>

<body>
    <div class="one"></div>
</body>

连写顺序:color image repeat position

元素显示模式

三种显示模式

元素模式 特点 代表标签
块状元素 独占一行;宽度默认占满一行,高度默认由内容撑开;可以设置宽高 div,p,h系列标签
行内元素 一行可以显示多个;宽度和高度默认都是由内容撑开;不可以设置宽高 a,span
行内块元素 一行可以显示多个;可以设置宽高 input

三种模式转换

使用 display进行转换

  • 转换块状元素 display: block;
  • 转换行内元素 display: inline;
  • 转换行内块元素 display: inline-block;

嵌套规范

  • a标签不能嵌套a标签
  • p标签不能嵌套div等块级元素

三大特性

继承性

子承父业:子元素默认会继承父元素样式的效果

层叠性

给同一个标签设置相同属性时,样式会覆盖,只有最底下的属性会生效;给同一个标签设置不同属性时,样式会叠加,属性会共同作用于标签。

只有当优先级相同时,才会出现层叠性

优先级

权重大小排序:!important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器 > 继承
!important不能提升继承的优先级,只要是继承,优先级则最低

权重计算(0,0,0,0)

0,0,0,0 从左往右表示:

  • 第1位代表行内样式的个数;
  • 第2位代表id选择器的个数;
  • 第3位代表类选择器的个数;
  • 第4位代表标签选择器的个数。

当权重相同时,则比较层叠性。

盒子模型

一个盒子模型的组成结构如下:

CSS基础知识

  • 内容content:width和height默认设置的是内容部分的宽高
  • 边框border:围绕内边距和内容的边框。
  • 内边距padding:清楚内容周围的区域,内边距是透明的。
  • 外边距margin:清楚边界外的区域,外边距是透明的。

边框

指定元素的样式、宽度和颜色,用border表示

名称 作用
border-width 边框粗细
border-style 边框样式
solid 实线
dashed 虚线
dotted 点线
border-color 边框颜色

特殊现象

margin的合并现象:垂直布局的盒子,此时上下的margin会合并。取两者间最大的margin值。

margin的塌陷现象:互相嵌套的块级元素,父子元素的margin-top会被合并共同作用在父元素上面。解决方法如下:

  1. 添加 padding-top值;
  2. 设置 overflow: hidden;
  3. 设置行内块样式 display: inline-block;
  4. 设置浮动 float: left

marginpadding布局(注意是布局,不是生效)对行内元素水平方向生效,垂直方向则无效!

定位属性

设置元素位置,用position表示

属性名 特点
静态定位 static 标准流中的元素默认就是静态定位;不能配合方位实现移动
相对定位 relative 需要配合方位实现移动;相对于自己原来的位置进行移动;占位置、没有脱标
绝对定位 absolute 需要配合方位实现移动;位置分情况;不占位置、已经脱标(脱标之后的元素,宽度默认由内容撑开)
固定定位 fixed 需要配合方位实现移动;永远相对于浏览器进行移动; 不占位置、已经脱标(脱标之后的元素,宽度默认由内容撑开)

应用场景

  • 让子元素相对于父元素移动:子绝父相
  • 水平垂直居中
    • 子绝父相
    • 同时给子元素设置 left: 50%;top: 50%; transform: translate(-50%, -50%)

装饰属性

垂直对齐方式

设置元素垂直对齐方式,使用vertical-align表示

属性值 特点
baseline 基线对齐
top 顶部对齐
middle 中部对齐
bottom 底部对齐

光标类型

设置鼠标光标类型,使用cursor表示

属性值 特点
default 默认箭头
pointer 小手;提示用户可以点击
text 工字型;提示用于选择文本
move 十字光标;提示用户可以拖拽

边框圆角

设置边框圆角,使用border-radius

从左上开始,顺时针进行设置值。

overflow

设置内容超出部分的显示效果

属性值 特点
visible 超出部分可见
hiddle 超出部分隐藏
scroll 显示滚动条
auto 根据内容的多少自动显示或隐藏滚动条

隐藏元素的属性:

  • overflow: hiddle 隐藏元素,元素占据位置
  • display: none 隐藏元素,元素不占位置

颜色

指定颜色是通过使用预定义的颜色名称,或RGB、RGBA、HEX、HSL、HSLA的值。颜色可作用于背景、文本、边框等。

  • RGB颜色

    RGB颜色值指的是rgb(red, green, blue),每个参数定义了0到255之间的颜色强度。

    RGBA颜色值指的是rgba(red, green, blue, alpha)alpha表示透明度,是一个介于0.0(完全透明)和1.0(完全不透明)之间的数字。

  • HEX颜色

    HEX颜色指的是使用十六进制指定颜色。rrggbb其中rr(红色)、gg(绿色)和bb(蓝色)是介于00和ff之间的十六进制值。

  • HSL颜色

    HSL涉及到颜色的色相、饱和度和明度……

这些信息可能会帮助到你: 关于我们 | 饿了么返钱 | 捐赠支持

文章名称:CSS基础知识
文章链接:https://www.bysjb.cn/css.html
THE END
分享
二维码
打赏
< <上一篇
下一篇>>