Skip to content
Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
executable file 609 lines (415 sloc) 25.5 KB


个人网址: www.shilei.fun »

问题 · 文章 · 视频 · 照片 · Git


目录

CSS选择器

CSS常用属性

CSS盒模型

CSS表单

CSS媒体查询













选择器

基本 概念:祖先、父、同胞、子元素

DOM层级关系扩展:🍄 🍄




元素选择器:直接用元素名称选择

元素名称可直接当选择器,选择文档中所有同类型的元素。例:http://元素选择器




关系选择器:后代、子、相邻、兄弟等关系

后代选择器:A B
A 是 B 的父元素、直接父元素、祖先元素、就可以用(A空格B)来选择B元素。示例:http://AB.html

子选择器 :A>B
只有当 A 是 B 的直接父元素(B是离A最近的子元素)这一种情况才可以用(A>B)来选择 B 元素。示例:http://A>B.html

相邻选择器:A+B
当A和B是同胞元素,A、B 两个元素相邻。就可以用(A+B)来选择 B 元素示例:http://A+B.html

兄弟选择器:A~B
A、B 元素是同胞元素,并且 A 在 B 的上方。即可选中 B 元素示例:http://A~B.html




属性选择器:匹配元素属性或属性值

元素只要加了 class 名就可以用.class名{}来选择该元素,class 名可以重复。更多:http://.class{}
元素只要加了 id 名就可以用#id名{}来选择该元素,id 名不可以重复全局唯一。更多:http://#id{}

  • [class]﹍﹍﹍﹍选择所有标 class 属性的元素(属性值多少无所谓)
  • [alt="123"]﹍﹍﹍﹍选择所有元素带 alt 属性且值为 123 的元素
  • •••
[class~="t"]会选中属性值中带有`空格`的t。如t op、oper t、b t opb。如果t在中间两边都要有空格才会选中
[class^="top"]会选中属性值中`开头`带有top。如top、topert、topb。 
[class|="top"]会选中属性值中`开头`带有top-。如top-top-erttop-123。  
[class$="top"]会选中属性值中`接尾`带有top。如top、rtop、topb。  
[class*="top"]会选中属性值中`包含`top。如top、topert、btopb、doctop  




伪类选择器:基于元素特殊位置

伪类和伪元素非常灵活,灵活到什么程度呢?灵活到不会用的程度
伪类/伪元素:由于当时 css 选择器功能还不够强大!它主要是用来选择某些特殊位置、特殊状态的元素

常用伪类

  • :link﹍﹍﹍﹍未访问链接的状态
  • :visited﹍﹍﹍﹍访问过的链接的状态
  • :active﹍﹍﹍﹍鼠标按下去还没送手的状态
  • :hover﹍﹍﹍﹍鼠标悬停
  • :focus﹍﹍﹍﹍当元素获得焦点时
  • :target﹍﹍﹍﹍锚点
  • :first-child﹍﹍﹍﹍父元素第一个
  • :last-child﹍﹍﹍﹍父元素最后一个
  • :nth-child(n)﹍﹍﹍﹍父元素的第n个
  • :first-of-type﹍﹍﹍﹍智能父元素第一个
  • :last-of-type﹍﹍﹍﹍智能父元素最后一个
  • •••

伪元素选择器:基于元素特殊位置

伪类和伪元素非常灵活,灵活到什么程度呢?灵活到不会用的程度
伪类/伪元素:由于当时 css 选择器功能还不够强大!它主要是用来选择某些特殊位置、特殊状态的元素

  • ::first-letter﹍﹍﹍﹍首字符放大
  • ::first-line﹍﹍﹍﹍第一行
  • ::before﹍﹍﹍﹍前面
  • ::after﹍﹍﹍﹍后面
  • ::placeholder﹍﹍﹍﹍文本框提示/文本框默认值
  • •••




组合选择器:以上的混合形式

  1. 两个或者多个类名来选择。
  2. 如果类名之间有空格是嵌套关系。类名+上下文:会选中所有元素中带 top 类名下嵌套的所有带 doc 类名的元素,并设置成红色。
  3. 如果类名之间没有空格则是并列或关系。会选中元素中带 top 类名或者 doc 类名

例:architect > p {color:red;}

  1. 后代结合符(子选择器)
  2. 一般情况下 architect p 表示类名为 architect 的元素下所有嵌套的p元素都会选中
  3. 不管是一层嵌套(子元素)还是多层嵌套(子子元素)
  4. 而有时候我只想选中。类名为architect元素下的一层子元素。就可以在类名和元素名中间加

例:P+P {color:red;}

  1. 相邻同胞结合符
  2. 会选中第一个 p 元素下的所有的子元素 p 元素
  3. 意思是:以第一个 p 元素为基准,往下所有同胞元素的 p 元素都设置红色。嵌套也算,相邻同胞 p 元素不算。必须是连着的

例:P~P {color:red;}

  1. 普通同胞结合符
  2. 任何属于同一父元素的同胞 h1 后面的 h2 元素设置成红色
  3. 意思是:和相邻同胞结合符区别是。只要是在第一个 p 下的所有 p 元素都设置成红色

例:h1,h2 {color:red;}

  1. 多个元素共享一个规则声明。只要用逗号分隔开即可
  2. 意思是:将所有 h1 和 h2 两个元素都设置成红色,不管 h1 和 h2 在页面中声明位置。

例:strong.error {color:red;}

  • 会选择类名是 error 的 strong 元素

例:.are p {color:red;}

  1. 复合型选择器
  2. 会选择 p 元素设置成红色,不过这个 p 元素必须是任何元素中有带 are 类名的元素

例:.architect p {color:red;}

  • CSS 确定所有 class 为 "architect" 的后代 P 元素(不管是几代)设置成红色

页面中每个主要区域的顶级元素添加一个 ID,放在上下文选择符的开头,就能起到框定后代元素的作用。
这可以减少 ID 名和 class 名的有效方法*













常用属性

表格:常用属性

text-align:center;
﹍﹍﹍﹍﹍﹍﹍﹍表格标签可以接受行内样式文本居中

display表格属性
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍让元素具有表格属性

table-cell
﹍﹍﹍﹍﹍﹍﹍元素具有单元格样式,居中和垂直居中

colspan="n"﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍单元格跨n格
rowspan="n"﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍单元格跨n列




文字:常用属性

white-space:per
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍显示空格

vertical-align;
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍垂直对齐

font-style:italic;
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍字体倾斜

font-variant:small-caps;
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍大型小写字母

word-spacing:40px;
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍字间距

letter-spacing:10px;
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍字偶距

text-indent:32px
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍文本缩进、向右偏移

text-align:left;
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍文本对齐

text-transform:capitalize;
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍文本的大小写

text-decoration:underkine;
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍下划线、上划线、删除线

z-index
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍重叠次序

visibility:hidden;
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍元素隐藏,位置还在

list-style-type;
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍更改列表小圆点

text-decoration:none;
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍文字下划线设置

color:#666666
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍字体颜色

font-family:sans-serif;
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍指定字体

font-weight:bold;
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍字体加粗

font-size:18px;
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍字号

line-height:30px;
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍行高




布局:常用属性

display:none
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍元素隐藏消失包括位置

display:inline
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍行内元素

display:block;
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍块级元素

overflow:hidden;
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍内容溢出

position:relative;
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍定位

background-clip:padding-box;
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍指定背景显示范围




装饰:常用属性

background-color
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍背景颜色

background-repeat;
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍重复背景

background-positions
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍指定背景图像位置

background-attachment;
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍背景图片是否跟随页面滚动

border-color:transparent;
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍边框透明

box-shsdow:1px 1px 3px #ccc;
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍可以对任何元素的边框产生阴影

cursor:pointer;
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍光标形状

transform: scale(2, 2);
﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍将元素旋转,缩放,移动,倾斜













盒模型

特性

  1. 默认模式:CSS 控制的 width 宽度仅仅是元素的实际内容宽度不包括元素内边距、边框。
  2. box-sizing:border-box 模式:CSS 控制的 width 值包括实际内容 边框 内边距。
    • 增加元素的 padding、margin、border 值,元素内容会减小
  3. 当一个元素嵌套一个元素时,并且被嵌套的元素没有设置宽度值时
    • 它在水平方向上内容会适应父元素,在自身外边距、内边距、边框,增加时内容会减小。


  • 内容和显示分离
  • 网站设计两大类:1、固定布局。2、响应式布局·
  • 保持良好的习惯:
    • 语义化元素:恰当地使用 article、aside、nav、section、header、footer、div
                 ( 文章 )(附注栏)(导航) (章节目录) (页眉) (页脚) (无语义)
    • 结构良好:即使不用 css 的情况下内容顺序和位置也是合理的
    • 对默认样式标准化html5shiv来让旧版本的 IE 支持 HTML5 的新语义元素

padding:﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍实际内容到边框的空间

  • 背景颜色能应用到元素的最边界。
  • 属性可简写。
  • 单位 px em
    • padding:﹍﹍﹍﹍默认设置四周内边距
    • padding-top:﹍﹍﹍﹍只设置顶部内边距
    • padding-right:﹍﹍﹍﹍只设置右侧内边距
    • padding-bottom:﹍﹍﹍﹍只设置底部内边距
    • padding-left:﹍﹍﹍﹍只设置左侧内边距

border:﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍元素的边框

  • 所有元素都可以设置边框。
  • 可选属性:样式、厚度、颜色。
  • 属性可简写。
  • 单位 px em,外边距和内边距使用 em 单位时,它的值是相对于该元素的字体大小,而不是相对于父元素。
    • 后面单可写一个或多个。
    • border:﹍﹍﹍﹍默认设置四周边框
    • border-top:﹍﹍﹍﹍只设置顶部边框
    • border-right:﹍﹍﹍﹍只设置右侧边框
    • border-bottom:﹍﹍﹍﹍只设置底部边框
    • border-left:﹍﹍﹍﹍只设置左侧边框
    • border-width:﹍﹍﹍﹍设置边框宽
    • border-style:﹍﹍﹍﹍边框样式
    • 例:border-style

margin:﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍边框以外的透明空间

  • 默认外边距不可继承。
  • 两个元素接触的上边距和下外边距仅用数值较大的一个,左右无所谓。
  • 单位 px em,外边距和内边距使用 em 单位时,它的值是相对于该元素的字体大小,而不是相对于父元素。
    • margin:﹍﹍﹍﹍应用到四周
    • margin-top:﹍﹍﹍﹍顶部外边距
    • margin-right:﹍﹍﹍﹍右侧外边距
    • margin-left:﹍﹍﹍﹍左侧外边距
    • margin-bottom:﹍﹍﹍﹍底部外边距

属性简写

  • 一个:数值对应在四个方向上。
  • 两个:前一个数值对应上下,后一个数值对应左右。
  • 三个:第一个对应上边,第二个对应左右两边,第三个对应下边。
  • 四个:四个数值顺时针依次对应,上 右 下 左。

如果不指定width和height默认为auto

  • auto 值怎么算:包含块宽度减去元素外边距、内边距、边框。
  • 包含块:父元素的宽度值。
  • 如果子元素没有指定 width,就拿父元素的 width 值减去外边距、内边距、边框。剩下就是元素实际内容宽度。
    *在开发者工具中如果指定了外边距 margin 值,那么该元素显示的 width 值等于父元素宽度-外边距 margin 值
  • 指定 width 值右外边距会调整进行调整。
  • 手动设置 width 值,并且将左右 外边距 设置成 auto,那么外边距就等于最大值,这样元素会居中。
  • 盒子模型在默认模式中:既设置 width 又设置 padding  margin border 等属性。是 相加的意思。

width:100% 和 width:auto在添加"负"的外边距有何区别

width:auto "margin+padding+border+ 内容 =width= 父元素的 width"
填充至整个父元素 在各个方向上添加负外边距会超出父元素显示(拉伸)

width:100% “内容 =width= 父元素的 width"
元素的内容会填充至整个父元素 对元素设置负的 margin-top、margin-left 元素会位移,right、bottom 方向不会位移。

float﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍让元素浮动

  • 浮动元素必须要有宽度值。
  • 元素浮动后会脱离文档流,类似船浮在水上的状态。
  • 浮动元素不会改变父元素高度。
    • float-left﹍﹍﹍﹍让元素向左浮动,在他下面的元素会跑到他右边。
    • float-right﹍﹍﹍﹍让元素向右浮动,在他下面的元素会跑到他左边。
    • clear:none﹍﹍﹍﹍允许两边都可以有浮动对象
    • clear:both﹍﹍﹍﹍清除左右浮动。
    • clear:left﹍﹍﹍﹍清除左浮动。
    • clear:right﹍﹍﹍﹍清除右浮动。
    • clearfix:用在浮动元素的父元素上。目的是为了父元素包含浮动元素。

㈠ 从元素width、height值来理解浮动

  • 首先任何元素:都有三种状态
    • width 值确定
    • height 值确定
    • width、height值auto(没设定或者)
  • width 值确定
    • 块级元素、行内元素的内容可能会溢出(块级元素内容 width 值大于元素本身 width 值)
    • 背景颜色不会超出 width 值
  • height 值确定
    • 块级元素、行内元素的内容可能会溢出
    • 背景颜色是不会超出
  • width、height 都是 auto
    • width、height 值随着内容变化而变化
    • 背景颜色同上

㈡ 浮动可以想象成:船浮在水面上

  • 此时的 HTML DOM 不再是 2 维,而是 3 维
  • 鱼可以游到船下面
  • 船和船只能一个挨着一个

㈢ 把块级元素、行内元素特性代入浮动中

  • 块级元素独占一行
    • 此时的块级元素不管内容,会直接跑到浮动元素的下方(浮动元素左上角顶格的位置)
  • 行内元素一行显示
    • 和浮动元素在一行并列显示

㈣ 块级元素的3中情况(以下:浮动元素下面的块级元素统称为:块级元素)

  1. 块级元素 width、height 值都是自动
    • 浮动:块级元素会顶到浮动元素左对角线上,块级元素内容会自适应
  2. 块级元素 width 值确定、height 值 auto
    • 块级元素 width 值减去浮动元素的 width 值,剩下 width 值 大于 块级元素内容 width 值
      • 浮动
    • 块级元素 width 值减去浮动元素的 width 值,剩下 width值 小于 块级元素内容 width 值
      • 不浮动:但是块级元素 right 值会变高浮动元素的(因为是自动嘛)会顶到浮动元素左对角线上
  3. 块级元素 height 确定,width 值 auto - 浮动:块级元素内容可能会溢出
㈤ 行内元素的3中情况(浮动元素下面的行内元素统称为:行内元素(可接受盒模型控制的inline-block)
  1. 行内元素 width、height 值都是自动
    • 浮动
  2. 行内元素 width 值确定、height 值 auto
    • 浮动
  3. 行内元素 height 确定,width 值 auto
    • 浮动:
㈥ 行内元素的3中情况(浮动元素下面的行内元素统称为:行内元素(可接受盒模型控制的inline)
  1. 行内元素 width、height 值都是自动
    • 浮动
  2. 行内元素 width值确定、height 值 auto
    • 浮动
  3. 行内元素 height 确定,width 值 auto
    • 浮动













表单

概念:表单控件和表单注意事项

  • 控件:是对表单中用来收集数据的各种表单组件统称,包括文本框、复选框、单选框。

  • 控件组:fieldset 用来放一组数据类型相关的控件。

  • "名"="值":表单发给服务器数据的形式。
    "名" 指的是控件 name 的设定的值。
    "值" 指的是文本输入框输入的值或者选项控件设定的值。

  • 分组:复选框、单选框 都是成对出现,设置相同的 name 属性便于分组。

  • form:有两个必要属性。
    action 属性用于指定上用来处理表单数据的 URL。
    method 属性有 post get 两种用于怎么把数据发送到服务器。

  • section 元素把一对标注控件包含起来,便于添加样式和增强视觉结构。
    在 label 前:一般适用文本输入类控件。
    在 label 后:一般适用选项类型控件。

标签:表单标签功能说明

form 表单标签。

fieldset 控件组标签。控件的容器通常一组相关的控件放一个控件组内。

legend 控件组说明标签,其中说明文字还要用 span 标记才有效果。

section 用来标记一组 label 和 input 标签。 为了更方便给控件添加样式。
HTML 并没有规定具体标签,所以全凭个人喜好。

label 标注标签。每个控件都有一个对应的 label 标签,用来说明控件需要输入什么内容。
文本类型的控件 label 放在前面、选择类的 label 放后面。 每个控件都要和 label 关联(关联后点击 label 文本即可选中控件)
关联有两种方式:

  1. 并列:label 的 for 属性必须和控件的 id 属性一致

    <label for="name">姓名:</label>
    <input type="text" id="name" name="Name"/>
  2. 包含:label 的闭合标签在 input 标签后面。

    <label>姓名:<input type="text" id="name" name="Name"/></label>

input 输入标签。表单常用输入标签有多种输入类型。
checkbox:复选框
select:列表框
submit:提交 radio:单选框
text:文本框
password:文本显示为掩码
textarea:多行文本
id 属性和 for 属性必须保持一致。
name 属性在服务器端用到。













查询媒体

规则

  1. @media
  2. link标签的media属性
媒体类型()逻辑连接符媒体特性属性
all 匹配所有设备 and 两边都要满足width 浏览器窗口宽度
handled 手持设备not 求反height 浏览器窗口宽度
print 打印、打印预览or 满足一个即可device-hright 设备屏幕高度
screen 屏幕all 所有device-width 设备屏幕宽度
speech 语音合成only 只有orientation 横屏、竖屏
width浏览器窗口宽度意思是指浏览器显示网页的尺寸,不包括状态栏、收藏夹栏、地址栏、元素栏




示例

当浏览器窗口在 500px 以下时,应用 css 规则。示例:http://

浏览器窗口在 1000px 以上时,应用 "media2.css" 文件。示例:http://

所有设备当浏览器宽度大于 500px 小于 1000px 时,应用样式。示例:http://

横屏(landscape)竖屏(portrait)示例:http://

扩展:完整媒体特征属性

*用max意思基本上是,最大不超过。用min意思基本上是,最小不低于

You can’t perform that action at this time.