资讯专栏INFORMATION COLUMN

HTML表单及CSS选择器、伪类和伪元素

DDreach / 723人阅读

摘要:编写静态页面时使用常见的元素样式等使用语义化的元素样式新增了很多语义化标签若与元素样式,这两个标签都是无语义化的表示十与标签是块级元素独占一行默认的宽度为父级元素宽度的默认的高度为作用用于布局元素是内联元素

一、input标签

1.实现按钮效果
    -与表单相关的按钮效果
    -
2.
   -类似于 - 提交表单
3.
   -基本用法 - 也可以显示图片
   -鼠标点击图片时 - 也有提交表单的作用

不同于(只是图片)

二、基本选择器

1.选择器的优先级别
 通配符选择器 < 元素选择器 < 类选择器/属性选择器 < ID选择器
2.元素选择器 - 定位当前页面的指定标签名
  ID选择器 - 定位当前页面中指定ID属性值的标签(只能匹配一个标签,无法重复使用)
  类(class)选择器 - 定位当前页面中指定class属性值的标签
  通配符选择器 - 匹配当前页面所有内容
  属性选择器 - [attr] - 匹配含有指定属性(属性名为attr)的标签(元素)。
3.优先级别:内联样式 > 外联样式。
4.!important
  设置当前内容的选择器的级别为最高;
  注意 - 打乱CSS选择器的默认优先级别顺序;
  建议 - 尽量不要使用.

三、关系选择器

1.祖先与后代的关系 - 后代选择器 A B
2.父级与子级的关系 - 子选择器 A>B
3.相邻兄弟选择器 - 定位指定元素的下一个兄弟元素 A+B
4.后面兄弟选择器 - 定位指定元素的后面所有兄弟元素 A~B

四、组合选择器

1.组合选择器 - 选择器之间使用逗号隔开,之间为并集如:
h1, h2, h3 {font-size: 18px;}
其中:

标题一

标题二

标题三

2.组合选择器 - 选择器之间没有任何分隔,之间为交集 1) p#p1 { color: lightcoral; } 都选中

这是一个段落内容.

这是一个段落内容.

2) p.mini { font-size: 12px; } 只选中p元素。

标题二

这是一个段落内容.

五、颜色值

1.使用英文单词描述颜色
  -常用的颜色使用比较方便
  -问题
   -比较特殊的颜色,表示比较麻烦
   -不同浏览器对单词描述的颜色存在色差
    -建议 - 开发中,尽量不要使用
2.颜色基本由三原色(红、绿、蓝)组成
  -rgb(红, 绿, 蓝)
  -每个颜色值的范围 - 0 ~ 255
  - #红绿蓝
    -每个颜色使用两位表示
    -值的范围 00 ~ ff
    -举例
    -#000000

六、伪类

伪类 - 设定指定状态下的样式
标签链接 - 默认样式
   未被访问的样式 - 字体颜色为蓝色
   鼠标悬浮在链接元素时 - 鼠标样式变化
   当鼠标点击链接元素时 - 字体颜色为红色
已被访问的样式 - 字体颜色变化
:hover  :active  :visited  :link  :focus

七、伪元素

::before   ::after等

八、块级元素与内联元素

1.块级元素
    独占一行(自动换行) - 所有的块级元素都是垂直排列的
    

    2.内联元素 内联元素是水平方向排列的 内联元素 - 设置高度和宽度是无效的(高度和宽度由文字决定)

    九、语义化

    所谓的语义化
     -每一个指定的HTML元素, 具有明确的指定含义。
    HTML编写静态页面时
    1. 使用常见的HTML元素 + CSS样式
     -、

    等 2. 使用语义化的HTML元素 + CSS样式 -HTML5新增了很多语义化标签 3.若

    元素 + CSS样式,这两个标签都是无语义化的表示

    十、div与span

    1.
    标签是块级元素 - 独占一行 - 默认的宽度为父级元素宽度的100% - 默认的高度为 0 作用:用于布局 2.元素是内联元素

    文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

    转载请注明本文地址:https://www.ucloud.cn/yun/115556.html

    相关文章

    • HTML表单CSS选择伪类和伪元素

      摘要:编写静态页面时使用常见的元素样式等使用语义化的元素样式新增了很多语义化标签若与元素样式,这两个标签都是无语义化的表示十与标签是块级元素独占一行默认的宽度为父级元素宽度的默认的高度为作用用于布局元素是内联元素 一、input标签 1.实现按钮效果 -与表单相关的按钮效果 - 2.标签表示按钮 -与表单无关的按钮效果:按钮 -类似于 - 提交表单 3. -...

      fai1017 评论0 收藏0
    • 前端面试题-伪类和伪元素

      摘要:四伪类列举状态伪类状态伪类是基于元素当前状态进行选择的。目前,只有火狐浏览器支持伪类,并在火狐浏览器中使用时需要添加前缀试验阶段。 一、伪类和伪元素的引入 1. 规范说明 CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information...

      Cristic 评论0 收藏0
    • 前端面试题-伪类和伪元素

      摘要:四伪类列举状态伪类状态伪类是基于元素当前状态进行选择的。目前,只有火狐浏览器支持伪类,并在火狐浏览器中使用时需要添加前缀试验阶段。 一、伪类和伪元素的引入 1. 规范说明 CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information...

      entner 评论0 收藏0
    • css伪类和伪元素的学习

      摘要:发现有很多东西效果其实可以用伪类或者伪元素实现。记录下为什么引入伪类和伪元素引入伪类和伪元素概念是为了格式化文档树以外的信息,也就是说。伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者列表中的第一个元素。 最近用js实现一些css效果。发现有很多东西效果其实可以用伪类或者伪元素实现。特地补充下这方面的知识。 记录下 为什么引入伪类和伪元素 CSS introd...

      魏宪会 评论0 收藏0
    • css伪类和伪元素的区别,:before和::before的区别

      摘要:伪类用于选择树之外的信息,或是不能用简单选择器进行表示的信息。比如表示选择元素内容的之前内容,也就是表示选择元素被选中的内容。是的写法,是的写法。伪类用于选择DOM树之外的信息,或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素,比如:visited,:active;后者包含那些满足一定逻辑条件的DOM树中的元素,比如:first-child,:first-of-type,:...

      jeffrey_up 评论0 收藏0

    发表评论

    0条评论

    最新活动
    阅读需要支付1元查看
    <