建设安全员协会网站,现在标书都从哪个网站下载,建设的基本流程网站,个人简历表下载可填写文章目录1. 前言2. CSS2.1 css 的引入方式2.2 选择器2.3 CSS 常用属性2.3.1 字体属性2.3.2 文本属性2.3.3 背景属性2.4 圆角矩形2.5 元素的显示模式2.6 盒子模型2.7 弹性布局1. 前言 上文我们简单 将 HTML 过了一遍 #xff0c; 知道了 HTML 知识表示页面的结构和内容 #x…
文章目录1. 前言2. CSS2.1 css 的引入方式2.2 选择器2.3 CSS 常用属性2.3.1 字体属性2.3.2 文本属性2.3.3 背景属性2.4 圆角矩形2.5 元素的显示模式2.6 盒子模型2.7 弹性布局1. 前言 上文我们简单 将 HTML 过了一遍 知道了 HTML 知识表示页面的结构和内容 这里就和 人的骨头一样 。 下面就来学习一下 CSS CSS 就相当于 东方四大邪术中的化妆术 如 CSS 的作用 CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离 2. CSS 下面来看看 CSS 的基本 语法规则 : 这里的语法规则非常简单 就是 选择器 若干属性声明 . 举例 关于写 CSS 的方式 除了 上面这种 还存在 其他两种 下面来学习一下 2.1 css 的引入方式 1. 内部样式 使用 style 标签 直接把 CSS 写到 html 文件中 此时 style 标签 可以放到 任意位置 一般建议 放到 head 标签里 (这种方式 就是上面举例) 2. 内联样式 使用 style 属性 针对 指定的元素设置样式 , (此时不需要写选择器 直接写属性键值对) 这个时候只是针对当前元素生效 3. 外部样式 把 css 单独作为一个 .css 文件 再通过 link 属性 让 html 引入 改 css 文件 在实际开发中 一般使用外部样式来写 CSS 让html 和 css 分离开 相互不影响 也让 html 不那么混乱 更好的维护. 本文主要是对 css 进行扫盲 如何简单如何来 下面都会 采用 内部样式来举例 这里 内容样式 和 外部样式 都一样只不过一个写在 html 里面 一个单独写在一个 .css 文件中. 2.2 选择器 这里选择器 除了上面写的 选择器 还有很多的 这里就将它们都说一下 . 1.标签选择器 (元素选择器) : 在 { 前面写 标签的名字 此时 意味着 会选中 当前页面中所有的指定标签 !!! 就是上面演示的选择器 演示 在我们的页面上 往往 一个标签 他的样式 是不同的 使用上面这个选择器 就会导致 大片 一样的标签 表现出来的样式 都是一样的 这样就很难做到 一个标签 出现不同的效果 这里就需要借助 其他的 选择器了 . 2. 类 选择器 可以创建 CSS 类 手动指定那些元素应用这个类 注意 : 这里说的类 和 java 中的面向对象的类无关 . 只是名字 也是 class , class 所谓的 “类” 就是把一组 css属性起了个名字 方便别的地方引用 演示 除了 类选择器 下面再来看一下 ID 选择器 3. ID 选择器 html 页面中的每个元素都是可以设置一个唯一的 id 的 , 给 元素 安排 id 之后 就可以通过 id 来选中对应的元素了 上面三个选择器 都属于简单的基础选择器 除此之外 CSS 还支持 一些更复杂一点的 “复合选择器” 复合选择器 就是把 前面的 基础选择器组合一下 . 下面就来说几个比较简单的 复合选择器 4. 后代选择器 把多个简单的基础选择器组合一下 (可以是标签 类 id 选择器的任意组合) 举例 后代选择器 看完了 下面来看看 子选择器 5. 子选择器 也是把多个简单的基础选择器组合 标签 类 id 选择器任意组合 这里与后代选择器 的区别是 子选择器 只是找匹配的子元素 不找孙子元素之类的 . 子选择器 看完 下面来看一下 另外一个常见的选择器 6. 并集选择器 7. 伪类选择器 到此 这里我们的选择器 就看完了 关于 选择器 的一些细节可以看文档 CSS 教程 (w3school.com.cn) 2.3 CSS 常用属性 这里 CSS 样式 涵盖很多方面的 内容 包括不限于 大小 位置 颜色 形状 边距 边框 特殊滤镜 过滤效果 动画 … 和样式相关的属性是非常多的 我们 是不可能全部记住 , 这里 只需要知道一些常用的 其他的需要再去查就行了. 2.3.1 字体属性 1.设置字体 2. 设置字体大小 3. 字体的粗细 常见粗细值名称和数值对应 有了 这些字体属性 我们就可以将 div 设置 成 h1 的效果 又大又粗 也可以将 h1 设置和 div 一样 . 4. 文字样式 : 注意 上面的例子中 将 em 和 div 标签 写到了 body 标签的外面 但是页面还是显示出了效果 这也就是 之前说过的 鲁棒性 . 2.3.2 文本属性 1. 文字颜色 : color 2. 文本对齐 4. 文本装饰 5.文本缩进 6. 文本行高 2.3.3 背景属性 这里关于背景属性 主要研究两个 1. 背景颜色 2. 背景图片 1. 背景颜色 2. 背景图片 图一 图二 3.背景尺寸 2.4 圆角矩形 关于 圆角矩形 应该不陌生 因为我们的手机 应用 就是 好像是近几年 火的 . 我们的 html 元素默认都是一个个的矩形 这里想要表示 “带圆角的矩形” 就可以通过border-radius来设置 关于这个圆角矩形 其实还有很多玩法 这里我们仅可以控制 四个角 其实还可以 针对 四个角分别设置 本文 只是对 CSS 进行 扫盲 所以 感兴趣的可以去文档看看 . 推荐文档 : border-radius - CSS层叠样式表 | MDN (mozilla.org) 2.5 元素的显示模式 2.6 盒子模型 图一 图二 图三 总结 边框 border : 粗细 效果 颜色 分四个方向分别设置 内边距 : padding 分四个方向分别设置 外边距 margin 分四个方向分别设置 通过这几个属性 就可以控制元素之间 / 元素和内容之间 相对位置了 . 2.7 弹性布局 弹性布局 用来实现页面布局的 了解 几种布局方式 : 基于表格布局基于浮动布局 主要是解决 “水平方向排列” 问题 , 为啥不用解决 垂直呢 因为 块级元素默认就是垂直方向排列的 (独占一行)弹性布局 主要解决 “水平方向排列” 问题 (比浮动更简单 也没那么多坑)网格布局 , 二维的布局 相当于更高级版本的 “表格布局” (网络布局诞生的时间还不够长) 导致市面上还存在一些不支持网络布局的老浏览器 . 图一 图二 到此 CSS 的扫盲就结束了 下文就来了解一下 JavaScript
