总结了一些HTML、CSS的一些简单特性,纯属个人笔记,非文章

总结了一些HTML、CSS的一些简单特性,纯属个人笔记,非文章

前言

个人总结了一些容易忘记的HTML、CSS特性,以备查漏补缺,读者朋友们有兴趣的可以看看,也当查漏补缺,但我已在标题中声明,此篇纯属个人笔记,非文章!

HTML

target属性

 

 

target ="_self"   (默认在当前页面打开链接)
target = "_blank"   (在新的浏览器窗口打开链接)
复制代码

lable

在html中,lable标签通常和input标签一起使用,label标签为input元素定义标注(标记)。使用该标签后,你点击单选按钮或复选按钮的文本也是可以选中的。

 

总结了一些HTML、CSS的一些简单特性,纯属个人笔记,非文章_第1张图片

 

CSS

CSS的三种引入方式

  • 内联式(行内式)

 

总结了一些HTML、CSS的一些简单特性,纯属个人笔记,非文章_第2张图片

 

  • 嵌入式
  • 外部式

 

总结了一些HTML、CSS的一些简单特性,纯属个人笔记,非文章_第3张图片

 

CSS的选择器

标签选择器

 

总结了一些HTML、CSS的一些简单特性,纯属个人笔记,非文章_第4张图片

 

id选择器

 

总结了一些HTML、CSS的一些简单特性,纯属个人笔记,非文章_第5张图片

 

 

 

class选择器

类选择器可以同时携带多个类

 

 

总结了一些HTML、CSS的一些简单特性,纯属个人笔记,非文章_第6张图片

 

  • 后代选择器

 

总结了一些HTML、CSS的一些简单特性,纯属个人笔记,非文章_第7张图片

 

 

 

 

 

  • 子代选择器

 

总结了一些HTML、CSS的一些简单特性,纯属个人笔记,非文章_第8张图片

 

 

总结了一些HTML、CSS的一些简单特性,纯属个人笔记,非文章_第9张图片

 

 

 

  • 组合选择器

 

总结了一些HTML、CSS的一些简单特性,纯属个人笔记,非文章_第10张图片

 

 

总结了一些HTML、CSS的一些简单特性,纯属个人笔记,非文章_第11张图片

 

  • 交集选择器

 

总结了一些HTML、CSS的一些简单特性,纯属个人笔记,非文章_第12张图片

 

 

总结了一些HTML、CSS的一些简单特性,纯属个人笔记,非文章_第13张图片

 

  • 伪类选择器

 

总结了一些HTML、CSS的一些简单特性,纯属个人笔记,非文章_第14张图片

 

 

总结了一些HTML、CSS的一些简单特性,纯属个人笔记,非文章_第15张图片

 

CSS选择器权重

选择器类型:

  1. ID  #id
  2. class  .class
  3. 标签  p
  4. 通用  *
  5. 属性  [type="text"]
  6. 伪类  :hover
  7. 伪元素  ::first-line
  8. 子选择器、相邻选择器

权重计算规则:

  1. 第一等:代表内联样式,如: style=””,权值为1000。
  2. 第二等:代表ID选择器,如:#content,权值为0100。
  3. 第三等:代表类,伪类和属性选择器,如.content,权值为0010。
  4. 第四等:代表类型选择器和伪元素选择器,如div p,权值为0001。
  5. 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
  6. 继承的样式没有权值。

!important(最高权重)

 

总结了一些HTML、CSS的一些简单特性,纯属个人笔记,非文章_第16张图片

 

文本属性之text-decoration

  • 没有线
  • 上划线
  • 下划线
  • 删除线

文本属性之行高

 

总结了一些HTML、CSS的一些简单特性,纯属个人笔记,非文章_第17张图片

 

 

 

 

总结了一些HTML、CSS的一些简单特性,纯属个人笔记,非文章_第18张图片

 

 

总结了一些HTML、CSS的一些简单特性,纯属个人笔记,非文章_第19张图片

 

文本属性值之text-align

 

总结了一些HTML、CSS的一些简单特性,纯属个人笔记,非文章_第20张图片

 

 

总结了一些HTML、CSS的一些简单特性,纯属个人笔记,非文章_第21张图片

 

CSS中元素分类

  • 块状元素

 

总结了一些HTML、CSS的一些简单特性,纯属个人笔记,非文章_第22张图片

 

 

总结了一些HTML、CSS的一些简单特性,纯属个人笔记,非文章_第23张图片

 

  • 行内元素

 

总结了一些HTML、CSS的一些简单特性,纯属个人笔记,非文章_第24张图片

 

 

总结了一些HTML、CSS的一些简单特性,纯属个人笔记,非文章_第25张图片

 

  • 行内块元素

 

 

 

总结了一些HTML、CSS的一些简单特性,纯属个人笔记,非文章_第26张图片

 

display属性

 

总结了一些HTML、CSS的一些简单特性,纯属个人笔记,非文章_第27张图片
通常操作是把行内元素属性转换成行内块元素属性,这样就可以设置宽高了。



你可能感兴趣的:(总结了一些HTML、CSS的一些简单特性,纯属个人笔记,非文章)