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 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

    • element : 元素。
    • padding : 内边距，也有资料将其翻译为填充。
    • border : 边框。
    • margin : 外边距，也有资料将其翻译为空白或空白边。
     元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。背景应用于由内容和内边距、边框组成的区域。
     内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：
* {
  margin: 0;
  padding: 0;
}
     在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
     假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}
     内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。外边距可以是负值，而且在很多情况下都要使用负值的外边距。

浏览器兼容性

     一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
     虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

属性说明

  • 字体属性
    • font：可以设置多个字体属性，属性之间用空格隔开
    • font-family：指定字型，可附带多个值，第一个首选字型，然后第二选择，最后通用字体系列
    • font-size：设置字体大小
    • font-size-adjust：设置字体的纵横比值，也就是小写字母x与字体高度的比值
    • Cfont-stretch：设置字母的宽度
    • font-style：设置字体样式
    • font-variant：用于创建与小写字母具有相同尺寸的大写字母
    • font-weight：设置文本粗细程度
    • color：字体颜色
  • 文本属性
    • letter-spacing：设置字母之间的距离
    • text-align：设置文本的对齐方式
    • text-decoration：指定字体外观，例如：underline、overline、line-through、blink
    • text-indent：设置文本缩进量
    • text-shadow：用于创建文本的阴影
    • text-transform：指定文本的大小写
    • white-space：指示空格的处理方式
    • word-spacing：指定单词之间的距离
  • 颜色属性和背景属性
    • background：用于设置背景，可设置多个属性，属性之间用空格隔开
    • background-attachment：设置背景图为固定在网页中的一个位置还是随着网页滚动
    • background-color：设置背景颜色
    • background-image：设置背景图像
    • background-position：设置背景图相对于左上角的位置
    • background-repeat：指定是否重复背景图
    • background-positionX：指定背景图在水平方向上的位置
    • background-positionY：指定背景图在垂直方向上的位置
  • 边框属性
    • border-style（bottom、left、top、right）：指定了边框周围线的样式
    • border-width（bottom、left、top、right）：指定边框线的宽度
    • border-color（bottom、left、top、right）：指定边框线的颜色
  • 范围属性
    • height：指定块元素的垂直高度
    • width：指定元素水平宽度
    • line-height：指定文本的高度，可用于控制行间距
    • max-height：指定块级别元素的最大高度
    • max-width：指定块级别元素的最大宽度
    • min-height：指定块级别元素的最小高度
    • min-width：指定块级别元素的最小宽度
  • 页边距属性
    • margin（bottom、left、top、right）：用于设置框周围页边距的宽度
  • 内边距属性
    • padding（bottom、left、top、right）：设置元素边框和其内容之间的距离
  • 列表属性
    • list-style：设置项目列表、编号列表和定义列表的外观样式
    • list-style-position：设置标记符号放置在列表每一项的内部还是这些项的左边
    • list-style-type：指定项目列表应当使用的项目符号或编号的类型
    • marker-offset：指定列表项和其标记符号之间的空间
  • 位置属性
    • position：指定某个元素的定位方案
      • absolute 固定元素在画布上相对于其包含元素的某个特定位置
      • static 固定元素在网页的同一个位置，即使用户滚动网页也保持在该位置
      • relative 将元素放置在距离它正常位置具有一定偏移量的位置
      • fixed 将元素固定在网页的背景上，并且当用户滚动网页时元素不会移动
    • top：设置元素相对于窗口或包含元素顶部的垂直位置
    • left：设置元素相对于窗口或包含元素左边的水平位置
    • bottom：设置元素相对于窗口或包含元素底部的垂直位置
    • right：设置元素相对于窗口或包含元素右边的水平位置
    • vertical-align：设置内联元素的垂直定位方式
    • z-index：设置多个重叠元素中哪个元素出现在顶部，允许使用正数和负数
    • clip：用于控制元素的哪一部分是可见的
    • overflow：当内容太大以至于包含元素无法容纳时，该属性指定容器元素显示内容的方式
    • overflow-x：与overflow属性相同，但只能用于水平x轴
    • overflow-y：与overflow属性相同，但只能用于垂直y轴
  • 外边框属性
    • Outline：设置外边框样式，外边框类似于边框，但是外边框不占用任何空间，它位于画布之上
    • outline-color：设置外边框颜色
    • outline-style：设置外边框线的样式
    • outline-width：设置外边框的宽度
  • 表格属性
    • border-collapse：指定表格使用的边框模型
    • border-spacing：指定相邻单元格的边框之间的距离
    • caption-side：指定标题应当放置在表格的哪一边
    • empty-cells：指定空单元格是否显示边框
    • table-layout：指定浏览器如何计算表格的布局
  • 分类属性
    • clear：设置强制一些元素显示在它的下面，可指示元素的哪条边不能接触对齐元素
    • display：用于指定如何呈现一个元素，设置为none元素将不呈现并且不占用任何空间
    • float：指定随后的元素应当换行到该元素的左边或右边，而不是换行到下方
    • visibility：设置一个元素是否应当显示或隐藏
  • 国际化属性
    • direction：设置文本的方向，是从左到右还是从右到左
    • unicode-bidi：用于重写Unicode中语言的内置方向设置
  • 长度
    • 绝对长度
      • cm
      • in
      • mm
      • pc
      • pt
    • 相对长度
      • em
      • ex
      • px
 
 
分类: CSS
标签: CSS
 

CSS样式基础知识的更多相关文章

  1. HTML+CSS+JS基础知识

    HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...

  2. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  3. web前端学习（三）css学习笔记部分（1）-- css入门基础知识+基本样式

    1.介绍及语法 1.1CSS概述: CSS指层叠样式表 CSS样式表极大地提高了工作效率 如果值大于一个单词,需要加上引号(意思是值只有一个的时候可以不加引号) 1.2CSS高级语法 1.选择器分组 ...

  4. css 3d 基础知识

    css3d 总结 3d transform (3D变形)(rotate skew scale translate) 基础知识 perspective (视距,景深) perspective-origi ...

  5. 前端三件套 HTML+CSS+JS基础知识内容笔记

    HTML基础 目录 HTML基础 HTML5标签 doctype 标签 html标签 head标签 meta标签 title标签 body标签 文本和超链接标签 标题标签 段落标签 换行标签 水平标签 ...

  6. html学习第二天—— 第七章——CSS样式基本知识

    外部式css样式,写在单独的一个文件中外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<s ...

  7. HTML CSS样式基础

    一.css 1.什么是css? Cascading Style Sheet 级联样式表 改变样式的一个工具,说白了,就是为了让我们的页面好看, HTML底层封装了css这样一个工具. 2.怎么使用cs ...

  8. css入门基础知识

    一.CSS常用选择器 /*CSS注释*/ /*CSS修改页面中的所有标签必须借助选择器选中. 选择器中可以写多对CSS属性:每个属性名与属性值之间用:分隔,多对属性之间,必须用;分隔 选择器{ 属性1 ...

  9. 从零开始学习html（七）CSS样式基本知识

    一.内联式css样式,直接写在现有的HTML标签中 <!DOCTYPE HTML> <html> <head> <meta http-equiv=" ...

随机推荐

  1. 内网穿透&UDP打洞

    这两天找度度重新回忆了一下关于内网穿透的事情,在百度文库上找到了两三篇写的比较通俗易懂的文章,把内网穿透做个简单总结. 首先文章建议 Cone NAPT 还有希望,要是 Symmetri NAPT 就 ...

  2. 脱O把妹，记录这一周来迁移至MySQL的一些心得

    · 背景 公司要把一些老设备退服,一些陪伴我多年的DB要下线了,舍不得.正好借此机会,手贱把自己3个"回收站"DB迁移到MySQL上,也算是赶一把时髦.等真正看着这些老设备下线了的 ...

  3. JS获取浏览器型号

    /**********************************浏览器型号搜集start*************************************/ var userAgent ...

  4. UIAutomator源码分析之启动和运行

    通过上一篇<Android4.3引入的UiAutomation新框架官方简介>我们可以看到UiAutomator其实就是使用了UiAutomation这个新框架,通过调用Accessibi ...

  5. UIAutomator定位Android控件的方法实践和建议(Appium姊妹篇)

    在本人之前的一篇文章<<Appium基于安卓的各种FindElement的控件定位方法实践和建议>>第二章节谈到Appium可以通过使用UIAutomator的方法去定位And ...

  6. 修改MvcPager分页控件以适用Bootstrap 效果(含英文版,可下载)

    软件开发分页效果必不可少,对于Asp.Net MVC 而言,MvcPager 是个不错的选择.请访问http://www.webdiyer.com/mvcpager/ 由于自带的分页样式不能和项目整体 ...

  7. HashMap之Hash碰撞冲突解决方案及未来改进

    说明:参考网上的两篇文章做了简单的总结,以备后查(http://blogread.cn/it/article/7191?f=wb  ,http://it.deepinmind.com/%E6%80%A ...

  8. 工作小总结（字符串包含，获取当前页面的url等系列问题）

    1.字符串包含: var str="我爱中国";if(str.indexOf("中国")>=0){ alert("含有此字符串");} ...

  9. Failed to issue method call: Unit mysql.service failed to load: No such file or directory解决的方式

    Failed to issue method call: Unit mysql.service failed to load: No such file or directory解决的方式 作者:ch ...

  10. Android项目--tabhost

    所有牵扯到自定义布局的layout中尽量用RelativeLayout 在通讯录中如果像小米手机的UI那就是viewpager,在这里,我们做成静态的.通过tabhost来做. 1.布局 a) 直接用 ...