首页 > Web开发 > 详细

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

时间:2020-06-13 13:47:27      阅读:48      评论:0      收藏:0      [点我收藏+]

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

前言

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

HTML

target属性

 

技术分享图片

 

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

lable

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

 

技术分享图片

 

CSS

CSS的三种引入方式

  • 内联式(行内式)

 

技术分享图片

 

  • 嵌入式
  • 外部式

 

技术分享图片

 

CSS的选择器

标签选择器

 

技术分享图片

 

id选择器

 

技术分享图片

 

 

技术分享图片

 

class选择器

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

技术分享图片

 

 

技术分享图片

 

  • 后代选择器

 

技术分享图片

 

 

技术分享图片

 

 

技术分享图片

 

  • 子代选择器

 

技术分享图片

 

 

技术分享图片

 

 

技术分享图片

 

  • 组合选择器

 

技术分享图片

 

 

技术分享图片

 

  • 交集选择器

 

技术分享图片

 

 

技术分享图片

 

  • 伪类选择器

 

技术分享图片

 

 

技术分享图片

 

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(最高权重)

 

技术分享图片

 

文本属性之text-decoration

  • 没有线 技术分享图片
  • 上划线 技术分享图片
  • 下划线 技术分享图片
  • 删除线 技术分享图片

文本属性之行高

 

技术分享图片

 

 

技术分享图片

 

 

技术分享图片

 

 

技术分享图片

 

文本属性值之text-align

 

技术分享图片

 

 

技术分享图片

 

CSS中元素分类

  • 块状元素

 

技术分享图片

 

 

技术分享图片

 

  • 行内元素

 

技术分享图片

 

 

技术分享图片

 

  • 行内块元素

 

技术分享图片

 

 

技术分享图片

 

display属性

 

技术分享图片
通常操作是把行内元素属性转换成行内块元素属性,这样就可以设置宽高了。



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

原文:https://www.cnblogs.com/zyx110/p/13112603.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!