ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

css样式基础

2021-12-06 09:32:58  阅读:129  来源: 互联网

标签:例如 样式 元素 基础 特性 添加 选择器 css


 CSS样式概述

     CSS是Cascading Style Sheet 的缩写。译作“层叠样式表单”。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

  • 引用位置
    • 作为元素的style特性的值
    • 在<style>元素内部,位于<head>元素中
    • 使用<link>引用外部样式

 选择器

     指定声明应用于哪个或哪些元素,不同元素之间用逗号隔开,例如:td {width:36px;}
  • 声明
     用于设置如何样式化在选择器中引用的元素
  • 属性
     它是该规则希望影响的所选元素的属性
     它是属性的说明
  • 继承

      应用于某个元素的属性经常会被它的子元素所继承,可以针对特定的元素设置样式来覆盖已继承的样式

  • 通用选择器
     *{}
  • 类型选择器
     类型选择器匹配以逗号隔开的元素列表所标识的所有元素,例如:h1,h2,h3 {}
  • 类选择器
     类选择器可用于将一条规则应用于附带class特性的一个元素或多个元素,其中class特性的值与类选择器中指定的值相匹配,前缀使用".",例如:.classname {} 或者 td.classname {}
  • id选择器
     id选择器和类选择器工作方式类似,但是使用的是id特性的值,前缀使用"#",例如:#idname {}
  • 子选择器

     子选择器所匹配的元素是另外一个元素的直接子元素,例如:td>b {}

  • 派生选择器

     派生选择器所匹配的元素类型是另一个指定元素的派生元素或内嵌的元素,例如:table b {}

  • 相邻兄弟选择器

     相邻兄弟选择器匹配指定元素的相邻兄弟元素类型。例如:h1+p {}

  • 通用兄弟选择器

     通用兄弟选择器匹配指定元素的任何兄弟元素类型,即使它们不是直接的先后关系,例如:h1~p {}

  • 特性选择器
     特性选择器可以使用元素附带的特性以及特性的值,例如:p[特性选择条件] {}

 伪类

     伪类用于向某些选择器添加特殊的效果。伪类对元素进行分类是基于特征而不是它们的名字、属性或者内容。
    • :first-child  向元素的第一个子元素添加样式。
    • :link 向未被访问的链接添加样式。
    • :vistited 向已被访问的链接添加样式。
    • :hover 当鼠标悬浮在元素上方时,向元素添加样式。
    • :active 向被激活的元素添加样式。
    • :focus 向拥有键盘输入焦点的元素添加样式。
    • :lang  向带有指定 lang 属性的元素添加样式。

 伪元素

     伪元素用于向某些选择器设置特殊效果。
  • :first-letter 向文本的第一个字母添加特殊样式。
  • :first-line 向文本的首行添加特殊样式。
  • :before 在元素之前添加内容。
  • :after 在元素之后添加内容。

标签:例如,样式,元素,基础,特性,添加,选择器,css
来源: https://www.cnblogs.com/songminglei/p/15648410.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有