CSS

• CSS
  • - RWD响应式网页设计
  • 基础语法
    • 选择器
    • 三种样式
  • 基本要素
    • 块元素
    • display
    • inline-block
    • 文本
    • 字体
    • 链接
    • 单位
    • 颜色
    • 图像
    • 背景
    • 图标
  • 控件
    • 按钮
    • 列表
    • 表格
    • 表单
    • 分页
    • 多列布局column
    • 界面调整 outline-offset，resize
    • 导航栏
    • 悬停下拉菜单
    • 图片库
    • 网页布局
  • 边框之类
    • 边框
    • 边距
    • margin外边距
    • margin合并
    • 内边距padding
    • 高度宽度height，width
    • 框模型：内容-内边距-边框-外边距
    • 轮廓outline
  • 自适应相关
    • max-width
    • 定位position
    • Overflow
    • float浮动
    • clear清除浮动
    • Box Sizing
    • flexbox
  • 其他美化
  • 其他
    • CSS计数器
    • @media 媒体查询
    • CSS 变量
• RWD响应式网页设计

基础语法

选择器

• .class

  id

  .class1.class2
  .class1 .class2 空格表示后代
  ~ > + 等等等
• p.highlight:hover { //悬停变色 color: #ff0000;//:伪类 }
• p.intro::first-letter {//首字母样式 color: #ff0000;//::伪元素 font-size: 200%;}
• a[target] { background-color: yellow;//所有带target 属性的a元素}
  • a[target="_blank"] { background-color: yellow; }
  • [title~="flower"] { border: 5px solid yellow;//选取 title 属性包含 "flower" 单词的所有元素： }
  • [class|="top"] class属性以top开头的元素，必须完整单词
  • [class^="top"] 以top开头的元素，不必完整单词
  • [class$="test"] 以test结尾的元素，不必完整单词
  • [class*="te"] 包含te，不必完整单词
  • 用法：
    • input[type="text"]
    • input[type="button"]

三种样式

• 外部
  html:

html:  
  
  
  
mystyle.css:  
h1 {  
  color: navy;  
  margin-left: 20px;  
}  

• 内部：

• 行内：(不推荐)

This is a heading
  

优先级：

1. 行内样式（在 HTML 元素中）
2. 外部和内部样式表（在 head 部分）
3. 浏览器默认样式

• 优先级 :行内样式 > id > 类、属性和伪类 > 元素和伪元素

基本要素

块元素

display

• 每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。可以更改
• 块级元素（block element）div h,p,form,header,footer,section
• 行内元素（inline element）span,a,img
• 隐藏元素：
  • display: none; 不占用位置默认情况下，script 元素使用 ;
  • visibility:hidden; 也可以隐藏元素。但是占用位置还在。

inline-block

与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。

文本

• 阴影

• 文本溢出、整字换行、换行规则以及书写模式

• 悬停提示文本：利用hover加position加visibility

字体

链接

链接可以使用任何 CSS 属性（例如 color、font-family、background 等）来设置样式。

此外，可以根据链接处于什么状态来设置链接的不同样式。
四种链接状态分别是：

• a:link - 正常的，未访问的链接
• a:visited - 用户访问过的链接
• a:hover - 用户将鼠标悬停在链接上时
• a:active - 链接被点击时
• a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

单位

颜色

RGB HEX HSL 背景色 文字颜色，边框颜色
rgb(255, 99, 71) #ff6347 hsl(9, 100%, 64%) rgba(255, 99, 71, 0.5) hsla(9, 100%, 64%, 0.5)
140种标准颜色名

图像

vertical-align 文本中图像的垂直对齐方式：
width: 46px; height: 44px; - 定义我们要使用的图像部分

• 对齐 图像文本div对齐
• opacity 透明度
• 仅显示图像的某个部分
  background: url(navsprites.gif) 0 0;left 0px, top 0px）
• 图像样式：圆角，缩略图，响应式，居中，嵌入文本，滤镜，悬停叠加动画，悬停翻转，悬停模糊
• CSS图像2D转换（transforms）
• CSS图像3D转换
• CSS过渡动画transition
• CSS动画animation
• object-fit属性 用于规定应如何调整img或video的大小来适应其容器。

背景

background-color
background-image
background-repeat
background-attachment 滚动还是固定
background-position
body {background: #ffffff url("tree.png") no-repeat right top;} 简写属性
opacity 添加透明度，其所有子元素都继承相同的透明度。

图标

如需使用 Font Awesome 图标，请访问 fontawesome.com，登录并获取代码添加到 HTML 页面的 head 部分：

控件

按钮

列表

ul {//将图像指定为列表项标记：  
  list-style-image: url('sqpurple.gif');  
}  

• list-style-position: outside;" 表示项目符号点将在列表项之外
• list-style-type:none 属性也可以用于删除标记/项目符号。
• 请注意，列表还拥有默认的外边距和内边距。要删除此内容，请在 ul 或 ol 中添加 margin:0 和 padding:0 ：

表格

• 边框，双单边框，全宽边框，高宽，对齐，内边距，水平分割线 ,表格背景文本颜色
• 在 tr 元素上使用 :hover 选择器，以突出显示鼠标悬停时的表格行：
• 为了实现斑马纹表格效果，请使用 nth-child() 选择器，并为所有偶数（或奇数）表行添加 background-color：
  tr:nth-child(even) {background-color: #f2f2f2;}
• 响应式（滚动条）：在 table 元素周围添加带有 overflow-x:auto 的容器元素（例如 div），以实现响应式效果：

表单

用选择器input[type=text]
用伪类:focus 选择器可以在输入字段获得焦点时为其设置样式
transition搜索框动画
。。。

分页

多列布局column

界面调整 outline-offset，resize

导航栏

用列表，垂直水平导航栏

悬停下拉菜单

用.dropdown:hover .dropdown-content配合display：none来实现

图片库

看例子

网页布局

最常见的结构之一
----------------------
|            页眉            |
----------------------
|           导航栏         |
----------------------
|         |           |         |
| 内容 |主内容| 内容 |
|         |           |         |
----------------------
|            页脚            |
----------------------

边框之类

边框

边距

margin外边距

可以是负值
所有外边距属性都可以设置以下值：

• auto - 浏览器来计算外边距
• length - 以 px、pt、cm 等单位指定外边距
• % - 指定以包含元素宽度的百分比计的外边距
• inherit - 指定应从父元素继承外边距

margin合并

内边距padding

所有内边距属性都可以设置以下值：

• length - 以 px、pt、cm 等单位指定内边距
• % - 指定以包含元素宽度的百分比计的内边距
• inherit - 指定应从父元素继承内边距

高度宽度height，width

height 和 width 属性可设置如下值：

• auto - 默认。浏览器计算高度和宽度。
• length - 以 px、cm 等定义高度/宽度。
• % - 以包含块的百分比定义高度/宽度。
• initial - 将高度/宽度设置为默认值。
• inherit - 从其父值继承高度/宽度。

框模型：内容-内边距-边框-外边距

轮廓outline

样式style，宽度width，颜色color，偏移offset

自适应相关

max-width

自适应调整适应窗口大小

定位position

有五个不同的位置值：
static，relative，fixed，absolute，sticky

Overflow

overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。
overflow 属性可设置以下值：

• visible - 默认。溢出没有被剪裁。内容在元素框外渲染
• hidden - 溢出被剪裁，其余内容将不可见
• scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
• auto - 与 scroll 类似，但仅在必要时添加滚动条
• overflow-x 和 overflow-y 属性规定是仅水平还是垂直地（或同时）更改内容的溢出：

float浮动

float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。
float 属性可以设置以下值之一：

• left - 元素浮动到其容器的左侧
• right - 元素浮动在其容器的右侧
• none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
• inherit - 元素继承其父级的 float 值

clear清除浮动

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。
clear 属性可设置以下值之一：

• none - 允许两侧都有浮动元素。默认值
• left - 左侧不允许浮动元素
• right- 右侧不允许浮动元素
• both - 左侧或右侧均不允许浮动元素
• inherit - 元素继承其父级的 clear 值
  使用 clear 属性的最常见用法是在元素上使用了 float 属性之后。
• 在清除浮动时，应该对清除与浮动进行匹配：如果某个元素浮动到左侧，则应清除左侧。您的浮动元素会继续浮动，但是被清除的元素将显示在其下方。

Box Sizing

更直观地调整元素大小

flexbox

灵活的响应式布局

其他美化

• 圆角
• 边框图像
• 多重背景
• 渐变
• box阴影

其他

CSS计数器

@media 媒体查询

• 媒体查询可用于检查许多事情，例如：
  视口的宽度和高度，设备的宽度和高度，方向（平板电脑/手机处于横向还是纵向模式），分辨率
• 媒体查询实例

CSS 变量

var(name, value)
name 必需。变量名（以两条破折号开头）。
value 可选。回退值（在未找到变量时使用）。
变量名称必须以两个破折号（--）开头，且区分大小写！

• 首先：CSS 变量可以有全局或局部作用域。
  全局变量可以在整个文档中进行访问/使用，而局部变量只能在声明它的选择器内部使用。
  如需创建具有全局作用域的变量，请在 :root 选择器中声明它。 :root 选择器匹配文档的根元素。
  如需创建具有局部作用域的变量，请在将要使用它的选择器中声明它。
  首先，我们声明两个全局变量（--blue 和 --white）。然后，我们使用 var() 函数稍后在样式表中插入变量的值：

• 有时，我们希望变量仅在页面的特定部分中进行更改。
  假设我们想要按钮元素使用不同的蓝色。那么，我们可以在 button 选择器内重新声明 --blue 变量。当我们在这个选择器中使用 var(--blue) 时，它将使用此处声明的局部 --blue 变量值。
  我们看到局部的 --blue 变量会覆盖 button 元素的全局 --blue 变量：

• 根据设备改变变量

  @media screen and (min-width: 450px) {  
  .container {--fontsize: 50px;}  
  :root {--blue: lightblue;}    }  
  

• 使用 JavaScript 更改变量

RWD响应式网页设计