不常用的HTML和CSS 记录

选择器

  1. .demo>li 只选择demo下的li子元素

  2. :nth-child：父元素的第几个子元素

例子 解释
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素
:nth-child(2n) 选择器匹配属于其父元素的双数的子元素
:nth-child(2n+1) 选择器匹配属于其父元素的单数的子元素
  1. :nth-of-type：规定属于其父元素下的第X个元素的元素的每个元素
例子 解释
p:nth-of-type(2) 每个p元素匹配同类型中的第2个同级兄弟元素的背景色
p:nth-of-type(n) 每个p元素匹配同类型中的第n个同级兄弟元素的背景色
p:nth-of-type(2n) 每个p元素匹配同类型中的双数同级兄弟元素的背景色
p:nth-of-type(2n+1) 每个p元素匹配同类型中的单数同级兄弟元素的背景色

  1. .demo>li:hover .demo2{display：block} 当鼠标移动到li元素上的时候，li元素的子元素.demo2 会显示。

  2. :first-child：选择属于其父元素的首个子元素

  3. p:first-of-type：其父元素的第一个 p 元素

  4. :last-child：其父元素的最后一个子元素

  5. p:last-of -type：其父元素的最后一个 p 元素

  6. :fitst-letter：向元素的第一个字符添加样式

  7. :fitst-line：向元素的第一行添加样式，换行就是第二行了

  8. ::selection：匹配元素中被用户选中或处于高亮状态的部分

  9. :focus：选择器用于选取获得焦点的元素。

  10. :checked：选择器选取所有选中的复选框或单选按钮。

  11. 加号（+）选择器（相邻兄弟选择器）：

// 选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素
h1 + p {
   
     
     margin-top:50px;}
  1. ~ 选择器：之后的所有XX元素
// 为所有相同的父元素中，位于 p 元素之后的 所有 ul 元素设置背景
p~ul {
   
     
      background:#ff0000; }
  1. 属性选择器
// input标签 type为text 的元素
input[type=‘text’]{
   
     
     }
  1. 选择器中间元素没有空格
//.abc 和 .aaa 之间没有空格，下面代码表示：表示class里面既有abc又有aaa下的P元素
.abc.aaa p{
   
     
     }

HTML标签

  1. iframe：创建包含另外一个网页的内联框架
<a target='iframeName' href="url">
<iframe name='iframeName' src='url2'>

a链接可以通过target='iframeName'，和iframe标签绑定，点击后会修改iframe的src属性
  1. input 其他type属性
属性 解释
search 手机小键盘的换行按钮会变成搜索按钮，如果浏览器识别不了就会变成普通文本框。
range 会出现一个滑块，可以设置最大最小值，滑块会等分成几分
color 会调用系统的取色器
email e-mail 地址的输入，提交时会自动验证email的值
url url 地址的输入，提交时会自动验证url的值
number 输入为数字，可以设置最大最小值，还可以设置数值的间隔
  1. optgroup 把select里面相关的选项分组
使用label="titleName" 来设置分组名称

  1. button的type属性，默认值是submit

  2. label：标签为 input 元素定义标注（标记）（重点）

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。
如果您在 label 元素内点击文本，就会触发此控件。
也就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

label标签的 for 属性应当与相关元素的 id 属性相同。
也可以在label里面嵌套input元素，就不用使用for了
  1. datalist 中描述了其可能的值
请使用 input 元素的 list 属性来绑定 datalist。datalist使用ID属性来对应input的绑定

点击input后会出现可能的值，类似搜索，如果是固定信息，可以使用datalist做搜索显示可能值
  1. filedlist：表单分组
legend标签来设置title

  1. readonly：input表单只能读取，是个布尔属性

  2. disabled：input表单禁用，是个布尔属性

  3. 所有标签里面的 tabindex 属性：是tab键的切换顺序。

  4. address：标签定义文档作者或拥有者的联系信息。如果 address 元素位于 article 元素内部，则它表示该文章作者或拥有者的联系信息。通常的做法是将 address 元素添加到网页的头部或底部。

  5. time：标签定义日期或时间，或者两者。

<p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>
  1. abbr：标签指示简称或缩写，通过对缩写进行标记，能够为浏览器、拼写检查和搜索引擎提供有用的信息。
The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

  1. b：加粗。语义化方面，主要是对文字作区分，语音时候会停顿或重度。

  2. q：标记一段短的引用。使用 cite 属性来定义该引用的来源。

<p>WWF's goal is to: 
<q cite="http://www.wwf.org">
build a future where people live in harmony with nature
</q> 
we hope they succeed.</p>

  1. blockquote：摘自另一个源的块引用。使用 cite 属性来定义该引用的来源。
    blockquote 与 /blockquote 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。
    提示：如果标记是不需要段落分隔的短引用，请使用 q 元素。

CSS属性

  1. box-sizing：规定两个并排的带边框的框
属性 解释
content-box 宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。
border-box 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit 规定应从父元素继承 box-sizing 属性的值。
  1. background-clip：规定背景的绘制区域
属性 解释
border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。
  1. word-break：在恰当的断字点进行换行
属性 解释
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
  1. white-space：规定段落中的文本不进行换行
属性 解释
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
  1. text-overflow：修剪文本
属性 解释
clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。
  1. object-fit：对图片进行剪切
属性 解释
fill 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
contain 保持原有尺寸比例。内容被缩放。
cover 保持原有尺寸比例。但部分内容可能被剪切。
none 保留原有元素内容的长度和宽度，也就是说内容不会被重置。
scale-down 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
initial 设置为默认值。
inherit 从该元素的父元素继承属性。

  1. opacity：属性设置元素的不透明级别，是整个元素，包括元素内的文字

  2. cursor：属性规定要显示的光标的类型（形状）
    cursor: url(xxx) auto; 后面的auto是如果图片不显示，使用auto

  3. visibility：属性规定元素是否可见。即使不可见的元素也会占据页面上的空间

  4. 默认背景图横标纵坐标图片重复

  5. background-position：属性设置背景图像的起始位置
    background-position：top left;
    第一个值是水平位置，第二个值是垂直位置

  6. background-attachment：属性设置背景图像是否固定或者随着页面的其余部分滚动（相对于视图窗口的位置）

属性 解释
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时，背景图像不会移动。
inherit 规定应该从父元素继承 background-attachment 属性的设置。
  1. 速写（简写）background
    background：url(“imgs/images.jpg”) no-repeat 50% 50%/100% fixed #000
    顺序为设置图片、不重复、位置、尺寸、视口、背景颜色，因为位置和尺寸都有可能为百分比，所有浏览器规定尺寸必须写在位置后面中间加/隔开。
    有些属性可以不写，不写会按默认值处理

background： 背景颜色、背景图片地址、背景平铺、背景固定、背景位置、背景图片尺寸

  1. sprite（雪碧图，也叫精灵图）：将很多的图片组成一张大的图片，通过控制图片显示位置来达到自己想要的图

  2. resize：属性规定是否可由用户调整元素的尺寸。

属性 解释
none 用户无法调整元素的尺寸。
both 用户可调整元素的高度和宽度。
horizontal 用户可调整元素的宽度。
vertical 用户可调整元素的高度。

  1. @import “路径”：在CSS文件中导入另外一个css文件

  2. @charset “utf-8”：设置css文件的字符编码。
    注意：这个指令一定要写到第一行。

  3. @font-face：制作新字体
    font-family：新字体名称
    src：url（字体文件的位置）

@font-face{
   
     
     
	font-family: myFirstFont;
	src: url('Sansation_Light.ttf'),
		url('Sansation_Light.eot'); /* IE9 */
}
/*使用的时候*/ 
p{
   
     
     font-family：'myFirstFont'}
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/hustshu/p/14627678.html