作者小头像 Lv.2
62 成长值

个人介绍

即将遭受社会毒打的前端小白~

感兴趣或擅长的领域

编程语言、数据库
个人勋章
TA还没获得勋章~
成长雷达
20
42
0
0
0

个人资料

个人介绍

即将遭受社会毒打的前端小白~

感兴趣或擅长的领域

编程语言、数据库

达成规则

发布时间 2020/07/13 10:29:46 最后回复 Ananda 2020/07/28 15:26:09 版块 社区活动
15789 95 0
发布时间 2020/06/05 11:45:07 最后回复 @Wu 2020/07/05 23:55:07 版块 社区活动
55638 487 2
他的回复:
华为云ID:Winter_Z补第一周学习笔记# HTML 第一章 WEB简史 ## 一、WEB的诞生 ### 1. Internet > 中文正式译名为**因特网**,又叫作**国际互联网**,是由所有使用`公共语言互相通信的计算机`连接而组成的`全球网络`。 ### 2. 历史 - **军方需求催生了Internet。** > **起源:**20世纪60年代末,`冷战时期`。美国军方`防止部分网络被摧毁`后`仍能通信`,便由美国国防部的`高级研究计划局(ARPA)`建立了一个`军用网(ARPnet)`叫“**`阿帕网`**”。于`1969年`正式启用,当时仅连接了4台计算机供`科学实验`。 > **发展:**`1992年`,美国`IMB、MCI、MERIT`三家公司联合建了一个`高级网络服务公司`(ANS),建立了一个新的网络,叫做**`ANSnet`**。 ### 3. WWW - **`WWW` (也叫3W)与 `Inernet` 是`发展关系`,是其一种`呈现形式`。** > `WWW` 是 **`World Wide Web`** 的缩写,也可写成W3,中文名叫**`万维网`**。集`文本、图像、声音、视频`等多媒体信息于一身的`全球信息资源网络`。 ## 二、W3C - **全称:`World Wide Web Consortium`** - **万维网之父:蒂姆 · 伯纳斯 · 李(Tim Berners - Lee),`南安普顿大学、麻省理工大学教授`。** > **成立:**`1994`年,`Tim Berners - Lee` 和一群自助的公司创建了`W3C理事会`。 > **工作:** 1. **发展Web规范**;2. **解决开发商日益混乱的局面**;3. **管理HTML的升级扩展**。这些规范描述了`Web的通信协议`和其他的构建模块。 > **成员机构:** 1. **美国麻省理工大学** ;2. **欧洲数学与信息学研究联盟** ;3. **日本庆应大学** ;4. **中国北京航空航天大学**; 由四个`全球总部`的全球团队`联合运营`。 ## 三、网站 > `Website` 中文名为网站,指在 Inernet 上`根据一定规则`,使用HTML等工具制作的用于`展示特定内容相关网页的集合`。 > 网站是在互联网上**`拥有域名`**或**`地址`**并`提供一定网络服务`的**`主机`**,是`存储文件的空间`,以`服务器`为**载体**。 - **URL格式:**协议://主机地址 + 目录路径 + 参数。 ### 1. 常用协议: - **HTTP协议:**`超文本传输协议` --> **升级** --> `HTTPS协议`(SSL加密、更安全)。 - **FTP协议:**`文件传输协议`;可访问`服务器`上的文件。 - **File协议:**用于访问`本地计算机`的文件。 ### 2. 浏览器输入URL到页面显示的过程 > `输入网址URL` **-->** `URL通过域名解析` **-->** `TCP三次握手建立连接` **-->** `开始发送HTTP请求` **-->** `服务器返回页面给浏览器` **-->** `浏览器开始渲染页面` ## 四、WEB浏览器 ### 1. 浏览器 > 显示网站服务器或者档案系统内的`HTML文件`,并让`用户与这些文件互动`的软件。 ### 2. 浏览器内核 > 负责对网页语法进行解析,是浏览器所采用的`渲染引擎`,其决定了浏览器`如何显示网页`的内容以及页面的格式信息。 ### 3. 常见浏览器 - **IE浏览器:** **所属`微软`公司**,`Trident 内核`; - **Chrome浏览器:** **所属`Google`公司**,`Webkit内核` 后换为 `Blink内核`;采用**V8引擎**; - **FireFox浏览器:** **所属`Mozilla`公司**,`Gecko内核`; - **Safari浏览器:** **所属`苹果`公司**,`Webkit内核`; - **Opera浏览器:** **所属`Opera`公司**,`Presto内核`; #### (1)拓展:V8引擎 - **速度快;** - **操作简单;** - **代码调试方便;** - **对H5新特性支持好;** ## 五、WEB服务器 ### 1. 服务器 > 提供网上信息浏览服务,可以`解析HTTP协议`。 > 服务器`接收`到一个`HTTP请求`时,会`返回`一个`HTTP响应`,这样客户端就可以从`服务器`上获取网页内容,包括CSS、JS、音频、视频等资源。 ``` Client(客户端)->Server(服务器): 请求 Server(服务器)->Client(客户端): 响应 ``` ### 2. Web服务器部署结构 > `Internet` **->** `ISP防火墙` **->** `交换机` **->** `服务器`......(多个服务器) ## 六、拓展 ### 1. 常用服务器 - IIS服务器 - Apache - Nginx
发布时间 2020/06/05 11:45:07 最后回复 @Wu 2020/07/05 23:55:07 版块 社区活动
55638 487 2
他的回复:
华为云ID: Winter_Z# CSS 第六章 CSS定位 ## 一、定位属性 ### 1. 什么是定位属性 - 定位属性用于设置`元素在页面中的位置`; - 使用`position`属性来表示定位; - 它的值可以设置为:`static(标准流布局)`、`relative(相对布局)`、`absolute(绝对布局)`、`fixed(固定布局)`; - 默认值为`static`,表示`标准流布局`; ``` // 在你本地Demo中可以多添加几个廉价的div元素直到页面出现滚动条,方便观测属性显示效果;我是廉价的div华为云.pos1 { position: fixed; // 固定布局 width: 500px; // 不设置 width时,元素的宽度则会与元素内容的宽度一致 height: 200px; background: yellow; } ``` > 此Demo中,pos1 元素将会相对于浏览器窗口固定在其位置上,不随页面的滚动而滚动; ### 2. 定位位置 - 使用定位属性定位元素位置的时候,可以指定`上下左右`四个属性来控制元素的位置; - `top`用于设置元素定位时`距离上部`的偏移距离; - `bottom`用于设置元素定位时`距离下部`的偏移距离; - `left`用于设置元素定位时`距离左侧`的偏移距离; - `right`用于设置元素定位时`距离右侧`的偏移距离; - 需要注意的是,`偏移量可以为负值`; ### 3. 层级 - 使用属性`z-index`设置`定位元素的层级`,**值越大,显示时会优先显示,并覆盖其下面元素显示在最上面**。 - `z-index`属性`默认值为auto`,代表`层级与父元素相同`; - **该属性只在`position`值为`absolute`时有效;** ## 二、相对定位 - 相对定位是指元素`相对于标准文档流`中的`默认位置`来进行定位的; - 当position属性值设置为`relative`时,开启相对定位模式; - 相对定位并`不会让元素脱离标准流`; - 相对定位`不会影响到周围其他元素的排布`; - 实际使用时`相对定位`一般都是和`位置属性`一起使用; > **单独使用相对定位,元素不会有变化;**因为相对定位是相对于**标准流中的默认位置**而定位的,不配合位置属性一起使用将不会有任何变动,元素始终会在其默认位置。 ## 三、绝对定位 > **绝对定位的元素**是相对于`已经定位的父元素`进行定位的;如果其`父元素都没有进行定位`(也就是默认定位`position:static`)的,那么`绝对定位的元素` 将会是相对于`页面窗口`进行定位。 ``` // 相对于已经定位的父元素进行定位 .parent { width: 500px; height: 500px; position: relative; // 或者 position: absolute; backgroung: yellow; } .child { height: 100px; width: 100px; position: absolute; top: 0px; }我是父元素我是子元素``` ``` // 相对于页面窗口进行定位 .parent { width: 500px; height: 500px; backgroung: yellow; // 现在其父元素是默认定位,即 position: static 标准流布局; } .child { height: 100px; width: 100px; position: absolute; top: 0px; }我是父元素我是子元素``` ### 1. 什么是绝对定位 - 相对于除static定位之外的`第一个父元素`进行定位,如果`没有`就相对于`页面`定位; - 把position属性的值设置为`absolute`时,代表开启`绝对定位`模式; - 被设置为绝对定位的元素`会脱离标准流`; - 当`多个绝对定位元素`出现相互遮盖的情况时,可以使用`z-index`属性设置`层级`; ### 2. 绝对定位和相对定位搭配使用 - **情景案例**:当要让`子元素`相对于`父元素`进行`绝对定位`时,可以在`父元素上`使用`相对定位`; ``` .parent { height: 300px; background: yellow; position: relative; } .child { height: 100px; width: 200px; background: pink; position: absolute; left: 50%; }我是父元素,我使用相对定位我是子元素,我使用绝对定位``` ## 四、拓展 ### 1. 定位属性的使用方式 - **第一步:设置定位属性模式**。例如:想要`固定定位`效果就设置`fixed`属性值;`静态(默认)效果`就设置`static`属性值或者什么都`不设置`; - **第二步:设置位置属性**(将元素放在哪里),需要使用`上下左右`四个属性来控制。 ### 2. 固定定位 - 将元素固定在页面的某个位置,位置是`基于浏览器窗口`定位的; - 元素将会`脱离标准流`,不会根据页面的移动而移动;
发布时间 2020/06/05 11:45:07 最后回复 @Wu 2020/07/05 23:55:07 版块 社区活动
55638 487 2
他的回复:
华为云ID: Winter_Z# CSS 第五章 CSS浮动 ## 一、浮动 > 为了满足 HTML 页面的多样化布局,我们通过使用CSS浮动来改变HTML元素默认的布局方式,才能使页面更加美观。 ### 1. 什么叫浮动 - 浮动是指元素`脱离文档流向左`或者`向右`布局; - 使用`float`属性来设置元素的浮动; - 默认值为`none`,也就是不浮动; - 还可设置为`left`,表示`向左`浮动;设置为`right`,表示`向右`浮动; > **普通文档`标准流`布局:** 例如,不加任何CSS属性的 div 元素,在`默认情况`下,是`从上到下`的布局,并且会`沾满一行`(可以说是与其父元素的宽度相同);同情况下,span元素则是`在当前行`,`由左向右`的布局,直到`沾满当前行后换行`排列。 > 由此可见,**在元素的默认情况下的布局,就是`标准流布局`**。 ### 2. 浮动的特点 - 对元素`设置浮动之后`,无论是块级元素还是内联元素,都被`当作块级元素`处理; - 对元素`设置浮动之后`,该元素会`脱离标准流`,从而造成其`父元素的内容塌陷`; ``` .box { float: left; } // 左浮动 .box { float: right; } // 右浮动 .box { float: none; } // 无浮动 ``` ## 二、清除浮动 ### 1. 为什么要清除浮动 - 因为当元素设为浮动后,会引起`父元素的内容塌陷`,影响布局效果。 ### 2. clear 属性 - `clear`属性用于设置元素哪一侧不允许浮动; - 默认值为`none`,表示`不进行控制`; - 设置为`left`时,表示`左侧不允许浮动`; - 设置为`right`时,表示`右侧不允许浮动`; - 设置为`both`时,表示`两侧都不允许浮动`; ```我是正在游泳的left我是正在游泳的right// clear 属性只能作用在其父元素中最后一个子元素身上 .clear { clear: both; } ``` ### 3. overflow 属性 - overflow 属性用于设置元素`不够容纳内容时`(溢出)的显示方式; - 默认值为`visible`; - 值为`auto`时,`自动添加滚动条`; - 值为`hidden`时,会`隐藏超出的内容`; - 值为`scroll`时,会`一直显示滚动条`; ```我是正在游泳的left我是正在游泳的right// 通过overflow: hidden 属性,可以达到 clear:both 属性的效果; .box { overflow: hidden; } ``` ## 三、常用技巧 ### 1. 企业级应用中清除浮动的最佳方法 - `clearfix` 方案 - 使用`伪元素after`在父元素`尾部`添加一个元素; - 对添加的伪元素应用清除浮动的样式; - 必备三大样式:`content`、`clear`、`display` - 可选三大样式:height、font-size、visibility ```.clearfix:after { content: ""; clear: both; display: block; // 将元素转为块级元素 } ``` > **1. 为什么一定要将元素转为`块级元素`?** > 与 clear 属性相同,clearfix 属性都`必须作用在块级作用域`上。如果作用在`内联`或者`内联块级标签`上,都`无法清除浮动`。 > 作用在块级元素上之所以能清除浮动,是因为该元素`能够清除其左右侧的浮动`,并且要求`其宽度一定要与父元素的宽度能保持一致`;那么只有`块级元素`才能达到清除浮动的效果。 ## 四、实战案例 ### 1. 如何实现一个三列布局 - 实现一个`左中右`布局; - **左右两侧宽度固定**; - **中间内容区宽度能够`自适应`**; ### 2. Double Fly翼布局 - 第一步:使用`float`属性让`左中右三列浮动`; - 第二步:使用`负 margin`属性让`左右两列`与`中间列`处于`同一水平线上`; - 第三步:在`中间列`中增加一个div内容元素,设置margin值为`左右两列的宽度`; - 最后,需要`清除浮动`,让父元素高度正常显示; ### 3. 优点 - 中间内容列宽度`自适应` - 中间内容区域`最先加载` - 使用`浮动布局` - 巧妙`使用负margin属性保持三列位于同一水平线上` - 方法简单直接 - **浏览器兼容性好**
发布时间 2020/06/05 11:45:07 最后回复 @Wu 2020/07/05 23:55:07 版块 社区活动
55638 487 2
他的回复:
华为云ID:Winter_Z# CSS 第四章 CSS盒模型 ## 一、盒模型 ### 1. 什么叫盒模型 - 盒模型,英文叫做 Box Model; - 所有的HTML元素都可以看作一个盒子模型; - 我们可以把盒模型就想想成为一个盒子; - 盒模型中主要用来对HTML元素进行布局时使用; ### 2. 盒模型的作用 - 浏览器渲染页面时会根据CSS盒模型规则,将所有HTML元素表示为一个个矩形盒子(**正方形也是矩形**),作用在盒子上的CSS属性就决定了盒子的大小位置以及显示效果。 ### 3. 盒模型的构成 - 一个盒模型是由`四大部分`组成; - `元素内容`**(content)**、`内边距`**(padding)**、`边框`**(border)**、`外边框`**(margin)** ``` .box { padding: 20px; border: 5px solid #000000; margin: 50px; }我是一个无情的div元素``` > **注意:**元素的实际宽度 = `边框`**(border)** ✖ 2 + `内边距`**(padding)** ✖ 2 + `元素内容`**(content)**的宽度;此公式为**标准盒模型**的宽度计算公式; > 还有一种**怪异盒模型**(ie盒模型)计算公式:**元素的实际宽度 = `元素内容`的宽度 ; `元素内容的宽度`其包含了`内边距`**(padding)**、`边框`**(border)**、`元素内容`**(content)**的宽度**; ## 二、内边距 ### 1. 什么是内边距 - 内边距是指在HTML元素内容和边框之间的区域; - 使用CSS属性`padding`来表示; - 属性值为长度值或百分比,默认值是`0`; - 注意**取长度值时不能为负值**; - 百分比值相当于父元素的长度比例; ### 2. 内边距的各个小属性 - 使用`padding-top`定义`上内边距`; - 使用`padding-right`定义`右内边距`; - 使用`padding-bottom`定义`下内边距`; - 使用`padding-left`定义`左内边距`; - `padding`为简写属性; ``` /* 此时,box元素的上下左右内边距都为20px */ .box { padding: 20px; } /* 此写法依次对应:上下内边距、左右内边距 */ .box { padding: 10px(上下) 20px(左右) } /* 此种写法等同于:padding: 10px 20px 30px 20px */ .box { padding: 10px(上) 20px(右) 30px(下); } /* 简写属性中从左往右以此对应:上、右、下、左;使用此简写属性时顺序一定不能错! */ .box { padding: 10px 20px 30px 40px; } /* 也可如下,单独设置上右下左其中一边的内边距 */ .box { padding-top/right/bottom/left : 20px; } ``` > **注意:**在设置长度值时,一定要添加单位;如:10px。 ## 三、边框 ### 1. 什么叫边框 - 围绕元素内容和内边距的一条边线; - 使用属性`border`代表边框; - 我们可以使用边框属性精确控制这条线的`样式`、`宽度`、`颜色`; ### 2. 边框样式 - 使用`border-style`设置边框的样式属性; - 还可分别设置`上下左右`四条边框的样式属性; - 默认值为`none`,表示无边框; - 还可以设置多种样式,分别为`dotted`、`dashed`、`solid`、`double`、`groove`、`ridge`、`inset`、`outset`等; ### 3. 边框宽度 - 使用`border-width`设置边框的宽度属性; - 可分别设置`上下左右`四条边框的宽度; - 使用`三种`标准边框:`thin`、`medium`、`thick`; - 使用`长度值`作为宽度属性的属性值; ### 4. 边框颜色 - 使用`border-color`设置边框的颜色; - 可分别设置`上下左右`四条边框的颜色; - 可直接设置`颜色名`、`十六进制颜色`、`RGB函数值` ### 5. 复合属性 - 复合是指`一次使用多种样式`定义边框; - 可以使用`border-top`、`border-right`、`border-bottom`、`border-left`分别定义四条边框的所有属性,属性值是:`样式`、`宽度`、`颜色`;宽度和颜色可以选择省略; - 可直接使用`border`属性对四条边框同时设置;属性值同样是:`样式`、`宽度`、`颜色`;宽度和颜色可以选择省略; ```华为云在线教育.box { border-style: solid; /* 可使用三种标准边框;也可使用长度值设置 */ border-width: thick / medium / thick; border-width: 10px; /* 三种设置方式:颜色名、十六进制颜色、RGB函数值 */ border-color: red; border-color: #ff0000; border-color: rgb(255, 0, 0); /* 复合属性:可单独设置其中一个边框的样式;也可四条边框同时设置 */ border-top: 1px solid #00ff00; border: 10px dashed #0000ff; } ``` ## 四、外边距 ### 1. 什么是外边距 - 外边距是指`元素边框之外的区域`; - 设置外边框会在元素外围创建额外的空白空间; - 外边距的作用是**`控制元素和元素之间的距离`**; - 使用`margin`属性来设置外边距; - 还可以使用`margin-top`、`margin-bottom`、`margin-left`、`margin-right`分别控制元素不同方向的外边距; - 属性值可以是`长度值`或者`百分比`,**如果是长度值,则不能为负值**; - 当使用**`margin`简写属性时,取值的含义与`padding`相同**; ``` /* margin 的属性值的用法、顺序、定义等都与 padding 相同 */ margin-top: 50px; margin: 10px 20px 30px 40px; ``` ### 2. 居中显示 - margin有一个常用的特殊用法,`margin左右属性值`为`auto`时,可以设置元素`左右居中`显示; ``` /* 元素居中显示必须设置其 width 属性,否则会占满整行 */ width: 100px; margin: 50px auto; /* 此时,元素的左边距将无限延长;margin-right同理 */ width: 100px; margin-left: auto; ``` > **注意:**当两个**`div(块级)元素`**同时设置`margin`时,它`会有叠加显示`,相当于`两个元素之间的距离`取决于`最大margin属性值的元素`。如下: ``` /* 此时,两个div元素之间的距离为 40px */职业认证微认证.box1 { border: 1px solid #000; margin: 20px; } .box2 { border: 1px solid #00aa00; margin: 40px; } ``` > **注意:**当两个**`span(内联)元素`**同时设置`margin`时,`不会有叠加显示`,相当于`两个元素之间的距离`等于`两个元素margin属性值的总和`。如下: ``` /* 此时,两个div元素之间的距离为 60px */ 职业认证 微认证 .box1 { border: 1px solid #000; margin: 20px; } .box2 { border: 1px solid #00aa00; margin: 40px; } ``` ## 五、display属性 ### 1. 神奇的 display 属性 - `display`属性用于控制元素如何显示; - 属性值为`block`时,会将元素以`块级元素`的方式显示; - 属性值为`inline`时,会将元素以`内联元素`的方式显示; - 属性值为`inline-block`时,会将元素以`内联块级元素`的方式显示,同时具有`两个显示特性`; - 属性值为`none`时,元素将`会被隐藏`; ``` /* div块级元素 将被转换成内联元素 显示;span内联元素 将被转换成 块级元素 显示; */华为云华为云 .box1 { background-color: red; display: inline; } .box2 { background-color: yellow; display: block; } /* span内联元素 和 div块级元素 将会同时拥有 内联块级元素 两种显示效果(皆可设置 width 和 height ) */ 华为云1号华为云2号.box3 { display: inline-block; border: 1px solid darkgreen; width: 200px; height: 100px; font-size: 14px; } .box4 { display: inline-block; border: 1px solid blue; width: 200px; height: 100px; font-size: 14px; } ``` ## 六、拓展 ### 1. **`块级元素`和`内联元素`** #### 块级元素 - 元素高度取决于内容的高度; - 元素宽度取决于父元素的宽度; - 可以设置width、height属性 #### 内联元素 - 元素的高度、宽度皆取决于内容的高度、宽度; - 无法设置width、height属性; ### 2. **`标准盒模型`和`怪异盒模型`(IE盒模型)** - 标准盒模型的实际宽度 = border(左右) + padding(左右) + content; - 怪异盒模型的实际宽度 = width(已经包含了padding和border); - box-sizing: content-box属性可将其转化为标准盒模型; - box-sizing: border-box属性可将其转化为怪异盒模型; ### 3. **`块级`和`内联`元素`左右排布`中间的间隙问题** ``` /* 源码如下: */华为云1号华为云2号.box3 { display: inline-block; border: 1px solid darkgreen; width: 200px; height: 100px; } .box4 { display: inline-block; border: 1px solid blue; width: 200px; height: 100px; } /* 解决方法1:降低代码可读性格式化,将“空格-回车”删除。 */华为云1号华为云2号/* 解决方法2:将父级元素的 font-size 属性值为0,此时间隙消失,但文字也看不见;将子元素的 font-size 属性值设置为可见大小即可解决问题 */华为云1号华为云2号body { font-size: 0px; } .box3 { display: inline-block; border: 1px solid darkgreen; width: 200px; height: 100px; font-size:14px; } .box4 { display: inline-block; border: 1px solid blue; width: 200px; height: 100px; font-size: 14px; } ```
发布时间 2020/06/05 11:45:07 最后回复 @Wu 2020/07/05 23:55:07 版块 社区活动
55638 487 2
他的回复:
## **华为云ID: Winter_Z** ## **完成日期:2020/06/23** # CSS 第三章 CSS常用属性 ## 学习笔记 ### 字体 - 使用`font-family`属性来定义文字的字体; - 属性值为`字体的名称`,可设置多个名称,浏览器会按顺序使用第一个支持的字体; - 字体优先级列表; > **字体优先级列表**相当于,你定义的字体浏览器会按顺序使用本机已安装 (浏览器支持) 的字体。 #### 字体的属性值 / 种类 主要分为**衬线字体**和**非衬线字体**。除此两大类还有较为典型的**等宽字体**。 ``` /* 衬线字体 */ font-family: serif; /* 非衬线字体 */ font-family: sans-serif; /* 等宽字体 */ font-family: monospace; ``` ***衬线字体*** - 形状较为花哨,边缘有修饰效果; - 多数用于标题的显示; ***非衬线字体*** - 形状较为圆润,无过多修饰效果; - 多数用于正文; ***等宽字体*** - 每个字符宽度都是相等的; > 可通过浏览器**开发者工具(F12)** --- **单击“Elements”菜单栏** --- **选中要查看样式的元素** --- **单击右区域“Computed”标签** 查看该元素的CSS样式属性。 #### 字体尺寸 - 使用`font-size`属性来定义文字的尺寸; - 属性值为长度值。例如:30px; - 属性值可以使用百分比。例如:50%; > **百分比**是相对于其父元素 / 父容器而定义出来的。 ``` /* 30像素 指的是整个字体的区域的高度,并不是字体本身的大小 */ font-size: 30px; ``` #### 字体样式 - 使用`font-style`属性设置文字的样式; - 默认属性值为`normal`显示标准效果; - 当属性值显示为`italic`时显示倾斜效果; ``` /* 主要是往右倾斜 */ font-style: italic; ``` #### 字体粗细 - 使用`font-weight`属性设置文字的粗细; - 默认值为`normal`,相当于`400`,显示效果为**正常粗细**; - 属性值为`bold`时,相当于`700`,显示为**粗体**; - 属性值为`bolder`时,显示**更粗**; - 属性值为`lighter`时,显示**更细**; - 属性值也可设置为**具体数值**:**100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900**; > **具体数值不能设置除以上数值以外的数值。** 例如:150/230/40...... ``` /* 粗体 */ font-weight: bold; /* 较细 */ font-weight: 100; ``` #### 简写属性 - 使用`font`属性来定义所有文字的样式; - 各个属性值之间需要用空格分隔; - 格式:`font: font-family font-size font-style font-weight` ``` /* 此处 50px 指的是字体的行高; 使用方式:字体大小/字体行高 */ font: italic 30ox/50px bold serif; ``` ## 文本 > CSS当中的文本系列属性,主要就是用来修饰**HTML文档中的文本**。 #### 颜色 - 使用`color`属性来设置文本的颜色; - 属性值可以是`颜色名`、`十六进制颜色值`、`RGB颜色值`; ``` /* 颜色名 */ color: red; /* 十六进制颜色值 */ color: #ff0000; /* RGB颜色值 */ color: rgb(192,0,0); ``` #### 行高 - 使用`line-height`属性来设置文本行高; - 默认值为:`normal`; - 其他属性值为`长度值`、`百分比`; ``` /* 可使用 normal、长度值、百分比 */ line-height: normal / 50px / 250%; ``` #### 对齐方式 - 使用`text-align`属性来设置文本的对齐方式; - 属性值有:`left(左)`、`right(右)`、`center(中)`; ``` text-align: left / right / center; ``` #### 方向 - 使用`direction`属性设置文本的方向; - 属性值有:`ltr(左)`、`rtl(右)`; - 注意与对齐方式属性的区别; ``` /* 不可与 text-align 同时使用 */ direction: ltr / rtl; ``` #### 缩进 - 使用`text-indent`属性设置段落的首行缩进; - 默认值为**0**,其他属性值有:`长度值`、`百分比`; ``` /* 2em 相当于首行缩进两个字体的空间 */ text-indent: 50px / 2em / 50%; ``` #### 装饰线 - 使用`text-decoration`属性设置文本的装饰线; - 属性值有:`underline(下划线)`、`overline(上划线)`、`line-through(中划线)`; - 默认值为`none`,表示没有线; ``` /* 下划线、上划线、中划线 */ text-decoration: underline / overline / line-through; ``` #### 间隔 - 使用`letter-spacing`属性设置文本字符间隔的大小; - 属性值为**长度值**,可为负值; ``` /* 当为负值时,字体会重叠在一起 */ letter-spacing: 10px / -1px; ``` #### 阴影 - 使用`text-shadow`属性来设置文本的阴影; - 属性值为: X轴偏移量 + Y轴偏移量 + 模糊距离 + 颜色; ``` /* X轴偏移量、Y轴偏移量、模糊距离、颜色 */ text-shadow: 5px 5px 3px yellow; ``` ## 尺寸 #### 宽度和高度 - 使用`width`属性定义宽度; - 使用`height`属性定义高度; - 属性值为:`auto(默认值)`、`长度`、`百分比`; #### 最小宽度和最小高度 > **最小宽度**指的是元素最小的时候,其宽度为设置的最小宽度。此时宽度可延展,页面有多宽元素的宽度就有多宽。 > **最小高度**指的是元素最小的时候,其高度为设置的最小高度。 - 使用`min-width`属性定义最小宽度; ``` /* 不设置 width 属性值时,元素最大 width 等于页面 width;元素 min-width 为100px */ min-width: 100px; /* 若 width 的值小于 min-width 的值时,width 属性值不生效。 */ /* height 和 min-height 与此同理。 */ width: 50px; min-width: 100px; ``` - 使用`min-height`属性定义最小高度; ``` /* 不设置 height 和 min-height 属性值时,元素的 height 属性值时,默认为元素内容的高度 */ min-height: 100px; ``` #### 最大宽度和最大高度 - 使用`max-width`属性定义最大宽度; - 使用`max-height`属性定义最大高度; > 与**最小宽度**和**最小高度**同理。实例如下: ``` /* 此时,元素的宽度 = 页面的宽度 */ min-width: 100px; /* 此时,元素的宽度 = 500像素 */ max-width: 500px; /* 此时,元素的宽度 = 100像素;width不生效 */ width:50px; min-width: 100px; /* 此时,元素的宽度 = 500像素 */ width: 600px; max-width: 500px; /* 此时,元素的宽度 = 500像素;因为在不设置width属性值时,宽度可扩展至最大,即500px */ min-width: 100px; max-width: 500px; /* 此时,元素的宽度 = 300像素 */ width:300px; min-width: 100px; max-width: 500px; ``` ``` /* 此时,元素的高度 = 100像素;因为在不设置高度属性的情况下,元素默认的高度为元素内容的高度。 */ min-height: 100px; /* 此时,元素的高度 = 元素默认高度 */ max-height: 500px; /* 此时,元素的高度 = 100像素;height不生效 */ height:50px; min-height: 100px; /* 此时,元素的高度 = 500px */ height: 600px; max-height: 500px; /* 此时,元素的高度 = 100像素;因为在不设置height属性值时,高度可缩小至最小,即100px */ min-height: 100px; max-height: 500px; /* 此时,元素的高度 = 300像素 */ height:300px; min-height: 100px; max-height: 500px; ``` ## 列表 > 列表的种类分为**有序列表 (ol) **、**无序列表 (ul) **和**自定义列表**等。有序和无序列表使用较多,自定义列表多用于复杂的数据展示。 #### list-style-image - 用于指定一个图片作为列表项前面的标记; - 默认值为:`none`; - 可以设置一个图片的`url`作为标记图片; #### list-style-position - 用于设置在什么位置显示列表项前面的标记; - 默认值为:`outside`; - 还可设置为:`inside`; #### list-style-type - 用于设置列表项前面图标的类型 - 默认值为`disc(小圆点)`,其他值为:`circle(圆)`、`square(正方形)`、`decimal(数字)`、`none(无)`、`low-alpha(大写字母)`、`upper-alpha(小写字母)`... #### list-style - 这是一个简写属性; - `list-style` = `list-style-image` + `list-style-position` + `list-style-type`; - 其属性值可以忽略几项; ``` /* 指定图片*/ list-style-image: url("图片路径"); /* 设置位置 */ list-style-position: inside; /* 设置类型;注意:与 list-style-image 属性同时使用时,此类型属性无效 */ list-style-type: square; /* 通过 decimal 属性值,可将无序列表(ul)通过此属性变为有序列表(ol),两者网页效果相同。 */ list-style-type: decimal; /* 简写属性用法 */ list-style: inside low-alpha; ``` > **注意:**虽然`list-style-image`与`list-style-type`同时使用时后者会失效,但考虑到不同浏览器兼容性问题,大多数企业级开发仍然会将两个属性同时使用。 ## 背景 #### background-color - 用来设置元素的背景颜色; - 默认值为:`transparent(透明)`; - 三种方法直接设置颜色:`颜色名`、`十六进制颜色`、`RGB颜色`; ``` /* 依次对应三种方法 */ background-color: red; background-color: #ff0000; background-color: rgb(255,0,0) ``` #### background-image > 图片的`url地址`,可以使用`相对路径`和`绝对路径`。 - 用来设置背景元素的背景图片; - 默认值为:`none`; - 还可以设置图片的`url地址`,来设置背景图片; ``` background-image: url(图片路径); ``` #### background-repeat - 配和`background-image`属性一起使用,用来设置背景图片的平铺方式; - 默认值为:`repeat`,表示将背景图片在`x轴`和`y轴`方向平铺显示; - 其他属性值:`repeat-x(沿x轴平铺)`、`repeat-y(沿y轴平铺)`、`no-repeat(不平铺)`; ``` background-repeat: no-repeat; ``` #### background-position - 配合`background-image`一起使用,用来设置背景图片的起始点位置; - 坐标默认为`左上角零点`位置; - 位置参数:X轴方向`left`、`center`、`right`; Y轴方向:`top`、`center`、`bottom`; - 百分比: X轴位置`x%`、Y轴位置`y%`; - 长度:X轴离`原点`长度、Y轴离`原点`长度; ``` /* X轴方向靠右,Y轴方向居中 */ background-position: right center; /* 没有设置的属性值,默认值为center; 等同于上面的 right center */ background-position: right; /* 相当于X轴居中,Y轴居中 */ background-position:50% 50%; /* 长度的值,都是距离页面左上角的零点(原点)开始测量 */ background-position: 500px 200px; ``` #### background-attachment - 用于设置背景图片固定或者跟随页面滚动; - 默认值: `scroll`; - 还可以设置为`fixed`; ``` /* 此时,背景图片不会跟随页面滚动而滚动,会一直在屏幕的固定位置 */ background-attachment: fixed; /* 此时,背景图片会跟随页面的滚动而滚动,不会固定在屏幕的某位置 */ background-attachment: scroll; ``` #### background - 简写属性; - `background` = `background-color` + `background-image` + `background-repeat` + `background-position` + `background-attachment`; - 可以全部设置,也可以省略几项; ## 简写属性 - 属性之间都用空格来间隔; - 可以全部设置,也可以省略其中几项;被省略的属性将会按照其默认值显示效果; ``` background: url("logo.jpg") red no-repeat center center; ```
发布时间 2020/06/05 11:45:07 最后回复 @Wu 2020/07/05 23:55:07 版块 社区活动
55638 487 2