Web 前端开发技术 —— CSS

阅读量：

文章目录

Web 前端开发技术 —— CSS
【一

复制代码

* 二、 选择器
* * 1\. 标签选择器
  * 2\. ID选择器
  * 3\. 类选择器
  * 4\. 伪类选择器

III、颜色方案
IV、显示效果
V、字体样式
VI、背景颜色
VII、边框样式
VIII、元素展示格式
X. 内边距与外边距设置
XI. 盒子模型设置（box-sizing）
十二. 元素位置定位
十三. 浮动效果优化
十四. 灵活性布局增强
十五. 应用响应式布局技术
十六. 网格布局优化配置
十七. Boostrap 框架集成指南

Web 前端开发技术 —— CSS

一、样式定义方式

1. 行内样式表

复制代码

    <img src="/images/mountain.jpg" alt="" style="width: 300px; height: 200px;">

直接定义在标签的style属性中。作用范围：仅对当前标签产生影响。

2 内部样式表

复制代码

    <head>
    <style type="text/css">
    		/* 标签选择器 */
        div {	 	 
            width: 50px;
            height: 50px;
            background-color: lightblue;
        }
        /* 类选择器 */
        .second-div {
            background-color: lightgreen;
        }
    	</style>
    </head>
    
    <body>
    <div class="first-div">1</p>
    <div class="second-div">1</p>    
    </body>

说明位于style标签内，并通过选择器来影响相关元素。其应用领域涵盖多个元素。

3 外部样式表

复制代码

    /* style.css文件 */
    img {
    width: 200px;
    }
    .big {
    width: 70px;
    height: 70px;
    }

复制代码

     <link rel="stylesheet" href="/WebApply/static/css/style.css">

位于css样式文件中，并由特定的selectors（选择器）指定要影响的元素。可以通过link标签将某些网页内容导入到当前页面。其应用范围广泛，并适用于多个网页的设计需求。

二、选择器

1. 标签选择器

选择所有div标签：

复制代码

    div {
    width: 200px;
    height: 200px;
    background-color: gray;
    }

2. ID选择器

选择ID为rect-1的标签：

复制代码

    #rect-1 {
    width: 200px;
    height: 200px;
    background-color: gray;
    }

复制代码

    <div id="rect-1 ">div 2</div>

3. 类选择器

选择所有rectangle类的标签：

复制代码

    .rectangle {
    width: 200px;
    height: 200px;
    background-color: gray;
    }

复制代码

    <div class="rectangle ">div 2</div>

4. 伪类选择器

伪类用于定义元素的特殊状态。

链接伪类选择器：

:link 用于触发链接显示效果
:visited 指示链接已呈现为已访问状态
:hover 表示当前页面处于触控或悬停时的状态
/:active 表明当前元素处于按压状态下
/:focus 表示焦点已被施加到当前元素上

位置伪类选择器：

:nth-child(n)：表示其父标签子元素中第n个位置的所有元素。
nth-child(odd)：筛选奇数编号的子元素；nth-child(even)：筛选偶数编号的子元素。
其中nth-child(an + b)：其中n取所有非负整数值。

目标伪类选择器：

:target：当某个标签被链接到之后如果不更改其状态设置，则仅在URL字段指向该元素的属性时才会生效。

示例：

复制代码

    p:target {
    transform: scale(1.2);
    color: red;
    transition: 2s;
    }

复制代码

     <a href="#test">定位到 id 为 test 的某个页内标签</a>

元素在连接之后触发事件；刷新网页无变化发生；地址栏中多了#表明已链接；该元素已被触发#id。

复合选择器:

由两个及以上基础选择器组合而成的选择器。

选取元素A和B。
在该元素内部包含该类别的元素。
在该子标签中找到紧随parent标签的child标签。
在parent标签下的所有child标签中找到属于该子标签的子项。
在parent标签为A的情况下获取所有的child标签B。

通配符选择器

使用星号标识以选择所有标签
当使用星号表示时可以选择所有的标签
在方括号内标明属性名时可筛选该属性所属的所有标签
当方括号内带有属性值时则会筛选出该属性值对应的全部标签

示例：

复制代码

     <input type="text" required>
     <input type="number" name="" id="">

使用带有required属性的输入字段。
采用带有id标识符的输入字段。
指定为number类型的输入字段。

伪元素选择器

将特定内容当做一个元素，选择这些元素的选择器被称为伪元素选择器。

:: first-character: 获取输入字段的第一个字符
:: first-content: 获取输入字段的内容
:: selected-region: 标记为已选区域
:: append: 插入在当前元素之后
:: prepend: 插入在当前元素之前

样式渲染优先级

权重大小，越具体的选择器权重越大：
!important > 行内样式 > ID选择器 > 类与伪类选择器 > 标签选择器 > 通用选择器
权重相同时，后面的样式会覆盖前面的样式

三、颜色

预定义的颜色值： black、white、red、green、blue、lightblue等。

十六进制表示法： 采用六位十六进制数字来指定颜色值，并以 # 符号开头（如 #ADD8E6）。具体来说：

前两位代表红色通道，
中间两位代表绿色通道，
后两位代表蓝色通道。
简短形式如 #ABC 等价于 #AABBCC（即 AA 代表红色、BB 代表绿色、CC 代表蓝色）。

RGB 表示法： rgb(173, 216, 230)。

RGBA 表示法： rgba(173, 216, 230, 0.5)。前三个数同上，第四个数表示透明度。

取色方式：
在Chrome调试模式下捕获网页的颜色信息较为便捷。
对于其他复杂色彩方案，则可以通过QQ截图软件提取所需色调数据。
通过按下c键可快速获取RGB格式的颜色代码值。
当需要十六进制表示时，则需同时按下Shift和C键以完成复制操作。

四、文本

1. text-align

CSS text-align属性用于控制行内内容与块级父元素之间的对齐方式。该属性仅影响行内元素相对于其块级父元素的排列方式，并不影响块级元素自身的布局。可选值包括：left、right、center以及 justify。

2. line-height：行高

CSS中的line-height属性用于控制多行内容之间的垂直间距，在段落中的文字排版效果中具有重要作用。当处理块级元素时，默认情况下其值被设定为15px以确保有一定的基本垂直空间；而对于那些不遵循替代字符规则的一维布局（inline）元素，则会根据实际需求来确定各自所占的高度区域以实现预期排版效果

3. 说明部分：尺寸单位
px容器中的像素点
%基于其父容器的比例
em基于自身字体大小
rem基于根容器字体大小
vw基于视窗宽度比例
vh基于视窗高度比例

4. letter-spacing：字间距

CSS 的 letter-spacing 属性用于设置文本字符的间距。

5. text-indent：文本缩进

text-indent属性能定义一个块元素首行文本内容之前的缩进量。

6. text-decoration：设置下划线

设置下划线，常用于去掉链接的下划线，方his为：text-decoration : none;。

7. text-shadow：为文字添加阴影

text-shadow可用于对文字添加阴影效果。在文字和text-decorations之间添加多个shadow effects，并用逗号分隔每个effect的参数设置。每个shadow effect由元素沿X轴和Y轴方向的偏移量、模糊半径以及颜色组成。

五、字体

font-size 字体大小
font-styleitalic 斜体
font-weight1 - 1000的值，值越大越粗。bold 加粗
font-family 字体样式
monospace 等宽字体

六、背景

CSS属性值background-color用于设置元素的背景色。CSS属性值background-image用于为一个元素设置一个或多个背景图像。

渐变色：linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5))

该脚本参数background-size用于指定背景图片的尺寸。
此操作会使得背景图片完全覆盖所选区域。
该脚本参数background-repeat定义了图像的重贴模式。
此模式允许图像沿水平方向、垂直方向或双方向进行铺贴，
也可以选择不进行铺贴操作。

background-position为背景图片设置初始位置。

background-attachment属性用于指定背景图像的位置，在视图区域内固定或随包含它的元素块进行滚动。

七、边框

增加边框示例：boder:solid 3px black;

border-style 用来设定元素所有边框的样式。solid 实线，hidden 隐藏。

border-width 设置盒子模型的边框宽度。

border-color用于指定元素四个边框颜色的快速属性：border-top-color和border-right-color以及border-bottom-color和border-left-color。

border-radius边框圆角效果。

通过border-collapse属性来决定表格单元格的边框是否分隔开。当处于分隔样式时，默认情况下每个单元格都会拥有独立的边界线；如果设置为紧凑样式，则相邻单元格之间会共享边界线。

八、元素展示格式

1. display

block：块状标签。

例如： <div> <p> <h>，独占一行，宽度默认 100%。
width、height、margin、padding 均可控制。
想将<div>变成 <span> 将display 改为 inline 即可。

inline ：行内标签。

如 <span> 所示，在同一行内。
width 和 height 是不可用项，在水平方向上。
水平方向的有效项是 margin 和 padding。
在竖直方向上，
margin 和 padding 是无效项。
宽度默认采用自身内容宽度

inline-block：行内块元素。

如<img>所示，在Markdown中允许多行文字统一排版。
width, height, margin和padding等属性均可设置并灵活调整。
其中 width 的默认值即为自身内容宽度

2. white-space
影响段落间的空白显示情况。“<pre> 不会抑制行末或字段末的空白字符；而 “<p> 会过滤这些空白字符。”

3. overflow text-overflow
处理文字超出部分

4. word-break: break-all
使得超出标签内容的文字换行输出。

十、内边距与外边距

1. 基本概念

蓝色区域定义为内容区域。
绿色区域即padding带，默认宽度基于内边距计算；其中内边距表示内容区域与外围空间之间的间距。
border属性指定容器边缘的宽度。
yellow区域对应margin带，默认情况下其宽度基于外侧间距计算；外侧间距则指div矩形各条边上与页面四周之间的距离。

2. margin 外边距

支持指定4个方向的偏移量（上/下/左/右），其顺序与边框参数顺序一致，默认值为 none
允许使用百分比形式来表示
可通过设置 margin: 随选一数值 auto 来实现水平居中效果（示例：margin: 0 auto;）

3. padding 内边距

支持指定4个方向（上、下、左、右），这4个方向的顺序与边框样式相同。若某方向未指定样式，则继承其父级对应的相反方向样式。
- 使用百分比形式表示边框宽度，默认情况下所占宽度占父容器宽度的比例。

十一、盒子模型 box-sizing

content-box 内容盒子

其默认值即为内容盒子
其中元素的总宽度等于内容区域、内边缘距及周边 border 的总和。提升内边缘距或border厚度会导致整体尺寸增大。

border-box
盒子大小完全固定，增加内边距和边框会挤压内容宽度

十一、位置

static

默认是 static
文档是按照流式去渲染，即从上到下一层一层依次去渲染

relative 相对定位

设定一个偏移量以实现上下左右四个方向的偏移。
top: 20px表示基于元素边框的上边缘向下移动20像素。
left表示基于元素左边框向右移动；right表示基于右边框向左移动；bottom表示基于下边框向上移动。
值可取负值如left:-20px等价于向右移动20像素；负值代表相反方向。
若数值为负则表示与正方向相反的方向。
相对定位是基于该元素原始位置进行偏移操作其原始位置不受其他元素影响。
在此插入图片描述
1. absolute 绝对定位
基于屏幕某一特定位置的定位方式，在文章中固定该特定位置。
基于祖宗方向上第一个非 static 类型元素的位置进行确定性或不确定性地定位。
当元素发生偏移时，其原始所在的位置将被其他相关元素所占据。
1. fixed 固定定位
基于祖宗方向的第一个非 static 类型的元素进行定位。
它是全局视角下的一个固定点，在任何页面变化时都保持在视窗区域。
偏移后将不再占用原有空间。
1. sticky 粘性定位
始终保留在屏幕上。在即将离开屏幕时切换为静态布局，在决定离开后则立即切换至固定布局。

十二、浮动

float 的功能 是为了让块元素在一行时完整显示为一行，在不足一行时自动换行。相比于 inline-block ，虽然两者都可使块元素在同一行显示并留有间距；但 float 可以避免这种间隙。
float:left 的作用是将所有块元素靠左对齐；而 float:right 则会靠右对齐它们。左右浮动常用于将不同的

放到同一行，块与块之间没有间隙。注意：浮动显示的时候会脱离文档流。

clear ：清除浮动。clear:left 【在下一个元素样式中添加】

十三、 flex 布局

摆放顺序

display: flex: 排列时依照主次轴方向依次排布。排完后随后转至辅助轴方向继续排布。主次轴之间可通过设置实现方向切换。（允许设置为block、inline、inline-block或flex）

flex-direction 取值：
水平方向排布包括 row 和 row-reverse 两种情况；垂直方向排布包括 column 和 column-reverse 两种情况。
flex-wrap 取值：
非 wrap（non.wrap）为默认值即不换行；wrap 表示当内容超出宽度时自动换行，并将内容移动到下一行。

对齐方式

horizontal alignment approach for horizontal direction

垂直方向上的排列方式和排列方法均被指定为...
通过使用flexbox布局机制中的align-items属性实现横向的统一排布功能...
其中 flex-start属性决定了从上方开始依次排列各行； flex-end属性决定了从下方开始依次排列各行；而center属性则使各行居中。
需要注意的是，在设置相关样式时应确保上下两行之间没有任何间隙。

采用 flex 实现竖直居中

复制代码

    /* 若要使一个元素居中 */

    
    /* 水平方向： */
    margin-left: auto;
    margin-right: auto; 	
     /* 或者 margiin: 0 auto */;
    
    /* 竖直方向： */
    position: relative;
    top: 50%;
    transform: translateY(-50%);

复制代码

    /* 用flex竖直更方便 */

    /* 操作的是其父元素 */
    /* 首先display改为flex */
    justify-content: center;
    align-content: center;

十四、响应式布局

响应式布局即网站跑在不不同设备上的时候展示的效果不同

媒体查询机制能够识别当前屏幕的逻辑宽度，并根据不同的尺寸应用相应的CSS样式；依据不同分辨率编写相应的CSS文件以实现多设备适配。

常用需求：常规需求包括按照行优先顺序进行布局设计，在每一行中各区域所占比例是多少。采用栅格式排版方案时，默认会将一整行划分为十二个区间段，并根据不同的区域大小设定相应的百分比值。

示例：

复制代码

    @media(max-width:767px) {

    
    .col-sm-1 {
    /* 1/12 */
    width: 1/12%;
    }
    
    .col-sm-2 {
    /* 1/6 */
    width: 16.67%;
    }
    
    .col-sm-3 {
    /* 1/4 */
    width: 25%;
    }
    
    .col-sm-4 {
    /* 1/3 */
    width: 33.33%;
    }
    
    .col-sm-5 {
    /* 5/12 */
    width: 41.666667%;
    }
    
    .col-sm-6 {
    /* 1/2 */
    width: 50%;
    }
    
    .col-sm-7 {
    /* 7/12 */
    width: 50%;
    }
    
    .col-sm-8 {
    /* 8/12 */
    width: 50%;
    }
    
    .col-sm-9 {
    /* 9/12 */
    width: 50%;
    }
    
    .col-sm-10 {
    /* 9/12 */
    width: 50%;
    }
    
    .col-sm-10 {
    /* 9/12 */
    width: 50%;
    }
    
    .col-sm-11 {
    /* 9/12 */
    width: 50%;
    }
    
    
    .col-sm-12 {
    /* 9/12 */
    width: 100%;
    }
    }

十五、 Grid 布局

复制代码

    <div class="row">
       <div class="col-3"> // 将宽度分为12份，这里占宽度的三份
       </div>
     </div>

示例如下：

复制代码

    <div class="container">
            <div class="row">
                <div class="col-3">
                    <div class="card" style="margin-top: 20px">
                        <div class="card-body">
                            <!-- 表达式需要加冒号 -->
                            <img :src="$store.state.user.photo" alt="默认头像" style="width:100%">
                        </div>
                    </div>
                </div>
                <div class="col-9">
                	...
                </div>

复制代码

    <div class="card" v-for="user in users" :key="user.id" @click="open_user_profile(user.id)">
            <div class="card-body">
              <div class="row">
                <div class="col-1">
                  <!-- 将标签属性加:,后面""中的不再是取字符串，而是从字符串中取值实现 -->
                  <img class="img-fluid" :src="user.photo" alt="">
                </div>
                <div class="col-11">
                  <div class="username">{{user.username}}</div>
                  <div class="reputation">22 <span>关注</span> {{user.followerCount}} <span>粉丝</span> 2 <span>获赞</span></div>
                </div>
              </div>
            </div>
    </div>

复制代码

    <div class="row justify-content-md-center">
      <div class="col-3">      
          <form>
            <div class="mb-3">
              <label for="username" class="form-label">用户名</label>
              <input v-model="username" class="form-control" id="username">
            </div>
            <div class="mb-3">
              <label for="password" class="form-label">密码</label>
              <input v-model="password" type="password" class="form-control" id="password">
            </div>
            <div class="error-massage">{{error_massage}}</div>
    
            <button type="submit" class="btn btn-primary">登录</button>
          </form>
      </div>
    </div>

十六、Boostrap 框架

1、项目中装入 boostrap 即可使用写好的样式模板：

npm i bootstrap

不同版本

npm install bootstrap@5.2.0-beta1

2、项目中导入 bootstrap

import ‘bootstrap/dist/css/bootstrap.css’;
import ‘bootstrap/dist/js/bootstrap’;

3、Bootstrap样式使用指南

全部评论 (0)

还没有任何评论哟~

Web 前端开发技术 —— CSS

文章目录 Web前端开发技术——CSS 一、样式定义方式 1\.行内样式表 2内部样式表 3外部样式表二、选择器 1\.标签选择器 2\.ID选择器 3\.类选择器 4\.伪类选择器三、颜色四、...

Web前端开发技术 HTML、CSS、JavaScript pdf

链接：https://pan.baidu.com/s/1uYi32GDgqhEKWZuAKBog5w密码：2hch 本书为完整版，以下为内容截图：

Web 前端开发技术 —— JavaScript

Web前端开发技术——JavaScript 总结JavaScript内容！文章目录 Web前端开发技术——JavaScript 一、js的引用方式与执行顺序 1、引用方式在标签中直接写js代码复...

web前端开发新技术，css全称怎么读

在敲下这个标题的时候，心里好虚。话说我一直不太喜欢发表这些看上去很假大空的文字，每个人的职业规划都是独有的，不具有太大的可复制性，把自己的经历放出去，容易误人子弟。

web前端之CSS技术（一）

web前端之CSS技术（一） 1\.CSS简介 1.1HTML的局限性 1.2CSS——网页的美容师 1.3总结 1.4CSS语法规范 1.5CSS代码风格 2\.CSS基础选择器 2.1CSS选择器...

《Web前端开发技术(HTML+CSS+JavaScript)》题库附答案

1.什么是Web技术？答：Web即全球广域网（WorldWideWeb），也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。

测试开发11---Web前端技术---CSS编程实例

1.元素选择器（上） <!DOCTYPEhtml <htmllang=en <head <metacharset=UTF8 <metaname=viewportcontent=width=device...

Web前端开发技术栈（前端干货）

Web前端开发技术栈浏览器 InternetExplorer（需要了解，需不需要看公司业务需求） Chrome（建议学习使用） Firefox（建议学习使用） Safari（建议学习使用） Oper...

web前端开发技术储久良第三版_web前端开发技术

Web前端开发工程师是一个比较新的职业，在国内乃至国际上真正开始受到重视的时间不超过5年。Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时...

Web前端开发技术实验5 CSS与页面分割

练习1、使用内联样式表及内部样式表，设计如图所示页面，要求如下：使用标题字和段落标记进行文字显示，在内部样式表中定义body标记内信息“居中显示”，定义p标记字体为隶书；通过p标记的style属性定义...

是否确定退出登录?

Web 前端开发技术 —— CSS

文章目录

Web 前端开发技术 —— CSS

一、 样式定义方式

1. 行内样式表

2 内部样式表

3 外部样式表

二、 选择器

1. 标签选择器

2. ID选择器

3. 类选择器

4. 伪类选择器

三、 颜色

四、 文本

五、 字体

六、 背景

七、边框

八、 元素展示格式

十、 内边距与外边距

十一、 盒子模型 box-sizing

content-box 内容盒子

十一、位置

十二、 浮动

十三、 flex 布局

十四、 响应式布局

十五、 Grid 布局

十六、Boostrap 框架

全部评论 (0)

相关文章推荐

Web 前端开发技术 —— CSS

Web前端开发技术 HTML、CSS、JavaScript pdf

Web 前端开发技术 —— JavaScript

web前端开发新技术，css全称怎么读

web前端之CSS技术（一）

《Web前端开发技术(HTML+CSS+JavaScript)》题库附答案

测试开发11---Web前端技术---CSS编程实例

Web前端开发技术栈（前端干货）

web前端开发技术储久良第三版_web前端开发技术

Web前端开发技术实验5 CSS与页面分割

一、样式定义方式

二、选择器

三、颜色

四、文本

五、字体

六、背景

八、元素展示格式

十、内边距与外边距

十一、盒子模型 box-sizing

十二、浮动

十四、响应式布局