简介

CSS（Casading Style Sheet）是一组HTML元素外观的设置规则，用于控制web页面的表现形式，一般被翻译为“级联样式表”或“层叠样式表”。通常情况下，我们是用HTML标签定义文档的内容，用CSS定义内容的表现形式，这样将页面内容与表现形式分离，可以使HTML文档代码看起来更加简练，缩短浏览器的加载时间。

CSS的语法

1.基本语法规则

CSS的语法规则比较简单，由三部分组成：选择器、属性、值，写法如下：

selector {property : value}

  2.样式的引用方式

  • 将所有样式存在.css文件中，然后在<head>元素中通过<link>元素引入，这样可以让多个页面引用同一个CSS样式，代码如下：
<link rel = "stylesheet" type = "text/css" href = "样式文件地址">
  • 页面内样式，这个样式只针对当前页面有效，直接在<head>元素里写进<style>元素内，如下：
<style>

   body {color : red }

</style>
  • 内联样式，这个样式只针对当前页面的某个元素有效，写在该元素的style属性中，大量使用内联样式会混淆CSS代码和HTML代码，故不推荐大量使用。如下：

    <p style = "font-size: 14pt ; color :red ">
    
  红色的文本
    
</p>

    如果多种样式之间存在冲突，其优先级是：内联样式 > 页面内样式 > <link>引入的样式。

   3.选择器分类

  • HTML选择器：选择器是HTML的元素名，如p、body等
  • 类选择器：选择器是由符号“."+类名组成，类名由页面中class属性值确定。
  • ID选择器：选择器是由符号“#"+id值组成，id值由页面中id属性值确定 。
  • HTML + 类选择器：选择器格式为”元素名.类名“,它可以缩小作用的范围。
  • 上下文选择器：上下文选择器指的是多个选择器用空号隔开，来准确地影响具体的范围，又叫做后代选择器。
  • 组选择器：对个选择器用逗号隔开，这样这些选择器将会使用同一种样式。
  • 兄弟选择器：对该元素下面的所有兄弟元素，例如 div ~ p{}。
  • 相邻选择器：对该元素向下相邻的指定元素，例如div + p{}，也可div +p + p{}。
  • 子代选择器：对该元素子代进行操作，不包括子代的子代，例如div > p{}。

   4.伪类

伪类是一系列特殊的选择器，用来描述超链接的不同状态。常见伪类如下：

  • a:link：用于修饰未单击过的超链接
  • a:visited：用于修饰单击过的超链接
  • a:hover：用于修饰鼠标置于其上的超链接
  • a:active：用于修饰鼠标获取焦点的超链接

有一个属性是cursor，其有四个值。wait等待)、pointer(小手指)、help()、default(默认箭头)。要注意的是a:hover 必须跟在 a:link 和 a:visited后面，a:active 必须跟在 a:hover后面。

5.常用的CSS属性介绍

（一）字体属性

  • font-family：设置字体类型，多个字体用逗号隔开，如“宋体，黑体”，如果浏览器没有宋体，就会使用备用的黑体。
  • font-size：设置字体大小，单位可以是像素px或倍数em。
  • font-style：设置字体样式，可选normal（普通）或italic（斜体）。
  • font-weight：设置字体粗细，可选100~900的数字或“bolder”、“lighter”。
  • color：设置字体颜色。
  • text-decoration：字体修饰，可选underline（加下划线）、over-line（加上划线）、line-through（加删除线）、none（不加修饰）。
  • font：复合属性，可综合设置字体信息。

（二）背景属性

  • background-color：设置背景颜色。
  • background-image：设置背景图片，值是图片的地址url。
  • background-repeat：设置背景图片的重复方式，默认值为repeat（重复），可选no-repeat、repeat-x（水平重复）、repeat-y。
  • background-attachment：设置图片的移动方式，默认值是scorll，背景随滚动条移动，可选fixed，不随滚动条移动。
  • background-position：设置图片的位置，格式为“x位置 y位置”，x位置可选left、center、right，y位置可选top、center、bottom，也可以使用像素位置。
  • background：复合属性，综合设置背景信息。

（三）区块属性

  • vertical-align：设置垂直对齐方式，可选top、middle、bottom、sub、super等。
  • text-align：设置水平对齐方式，可选left、center、right等。
  • text-indent：设置文本缩进，缩进值可使用px或em等为单位。
  • display：设置显示方式，可选none（不显示）、block（显示）、inline等。

（四）列表属性

  • list-style-type：设置列表符号的样式，可选circle、square等，选择none代表隐藏列表符号。
  • list-style-image：设置图片代替列表符号。
  • list-style-Position：设置列表符号的位置，可选inside或outside，或inherit（继承父级的这个属性）

（五）方框属性

浏览器通过BOX模型（盒子）来确定元素中间距、边框、边距等的位置，其中边框称为border，边距称为margin，间距被称为padding。

  • width：设置元素的宽度。
  • geight：设置元素的高度。
  • float：设置浮动方式，默认none，可选left、right。
  • clear：清除元素周围的浮动元素，可选Left（不允许元素左边有浮动元素）、Right、Both、None（允许元素两边都有浮动的元素）。
  • padding-left（top、right、bottom）：分别设置上、下、左、右的间距。
  • padding：同时设置上、下、左、右的间距。
  • margin-left（top、right、bottom）：分别设置上、下、左、右的边距。
  • margin：同时设置上、下、左、右的边距。值可为auto，即水平居中，但只对block有效。

（六）方框属性

  • border-style：设置边框样式，可选none（无）、soild（实线）、dotted（虚线）、dashed（点画线）等。
  • border-width：设置边框宽度。
  • border-color：设置边框颜色。
  • border：复合属性。
  • border-方向-style（width、color等）：为指定边框设置样式。
  • border-collapse：合并边框，默认值为separate，相邻元素的边框会分开显示，可选collapse，相邻元素的边框会合并。

（七）定位position

定位共分为四种，分别是static、relative、absolute、fixed。这四个定位各不相同，属性值有四个，分别是left、right、top、bottom。

  • static：默认值，静态定位，即没有定位。
  • relative：相对定位，不会脱离文档流，并以自身为参考，且原来的位置空间还是占着。
  • absolute：绝对定位，会脱离文档流，默认是以整个文档为参考，若有定位父级，则以定位父级为参考。若有多个定位父级，则以最近的定位父级为参考。
  • fixed：固定定位，脱离文档流，默认是以整个窗口为参考，不会随滚动条移动而移动。

（八）overflow

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。overflow属性有以下值：

  • visible：默认值。内容不会被修剪，会呈现在元素框之外。
  • hidden：内容会被修剪，并且其余内容是不可见的。
  • scroll：内容会被修剪，但是浏览器会显示滚动条以便查看超出的内容。
  • auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
  • inherit：规定应该从父元素继承 overflow 属性的值。

配合属性：text-overflow:ellipsis，其会将超出的部分换成三个点。white-space：nowrap，其设置浏览器变动时，一行的文字不会随之换行，超出的话就会显示左右滑动的滚动条。

white-space：nowrap；overflow：hidden;text-overflow:ellipsis;这三个属性使用会将超出的部分以点点替代。

web前端——CSS详解的更多相关文章

  1. web前端攻击详解

    前端攻击成因 在web网页的脚本中,有些部分的显示内容会依据外界输入值而发生变化,而如果这些声称html的程序中存在问题,就会滋生名为跨站脚本的安全隐患 XSS跨站脚本攻击: 英文全称cross-si ...

  2. web前端 DOM 详解

    先来点概念 文档对象模型(DOM)是一个独立于语言的,使用 XML 和 HTML 文档操作的应用程序接口(API). 在浏览器中,主要与 HTML 文档打交道,在网页应用中检索 XML 文档也很常见. ...

  3. CSS详解

    Web前端开发css基础样式总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255 ...

  4. DIV+CSS详解

    DIV+CSS详解 ✪DIV+CSS"这种叫法其实是一种不准确的叫法 在做笔记的最前面必须先给大家纠正一个错误,就是"DIV+CSS"这种叫法其实是一种不准确的叫法,是国 ...

  5. Java web.xml 配置详解

    在项目中总会遇到一些关于加载的优先级问题,近期也同样遇到过类似的,所以自己查找资料总结了下,下面有些是转载其他人的,毕竟人家写的不错,自己也就不重复造轮子了,只是略加点了自己的修饰. 首先可以肯定的是 ...

  6. [深入学习Web安全](5)详解MySQL注射

    [深入学习Web安全](5)详解MySQL注射 0x00 目录 0x00 目录 0x01 MySQL注射的简单介绍 0x02 对于information_schema库的研究 0x03 注射第一步—— ...

  7. jquery的css详解（二）

    jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ st ...

  8. java web.xml配置详解

    1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个Servl ...

  9. web.xml文件详解

      web.xml文件详解 Table of Contents 1 listener. filter.servlet 加载顺序 2 web.xml文件详解 3 相应元素配置 1 listener. f ...

随机推荐

  1. UVA 11235 RMQ算法

    上次的湘潭赛的C题,用线段树敲了下还是WA,不知道为何,我已经注意了处理相同数据,然后他们当时用的RMQ. 所以学了下RMQ,感觉算法思想是一样的,RMQ用了DP或者是递推,由单个数到2^k往上推,虽 ...

  2. Golang---BASE64编码原理

    BASE64编码概念 Base64 是一种基于64个可打印字符来表示二进制数据的表示方法.在 Base64中可打印字符包括字母 A-Z, a-z, 数字 0-9,这样共有 62 个字符,另外两个可打印 ...

  3. 第四章:Schema与数据类型优化

    1. 选择优化的数据类型 选择数据类型的原则 更小的通常更好:选择可以正确存储数据的最小数据类型 小的数据类型消耗更少的内存.CPU;占用更少的磁盘 选用简单的数据类型:简单的数据类型通常需要更少的C ...

  4. 第一章:MySQL架构和历史

    1.MySQL逻辑架构 MySQL存储引擎架构:将查询处理以及其他任务系统和数据的存储处理分离开来,这样做的好处在于可以根据需要灵活选择存储引擎. 第一层架构 -- 连接处理.授权认证.安全等. 第二 ...

  5. SAP_BASIS常用事务代码

    1.SM66:监控当前系统的所有进程: 2.SM50/SM51:监视当前客户端的所有进程: 3.AL08:查看系统当前用户登录情况: 4.ST22:查看系统发生的DUMP: 5.ST03:查看系统当前 ...

  6. 进度3_家庭记账本App_Fragment使用SQLite实现简单存储及查询

    AddFragment.java: package com.example.familybooks; import android.content.ContentValues; import andr ...

  7. GitHub练习——如何将本地已有项目添加到github

    刚开始开始接触,搞点简单的,看看是怎么把项目传上去,总结一下,大概是这些步骤: 创建本地仓库 将本地仓库变成git可管理的仓库:git init 把项目文件添加到缓存区:项目文件添加到已有的仓库,然后 ...

  8. MySQL读写分离如何实现？

    主要说下读写分离, 当我们的数据量很大时,数据库服务器的压力变大,这时候我们需要从架构方面来解决这一问题,在一个网站中读的操作很多,写的操作很少,这时候我们需要配置读写分离,把读操作和写操作分离出来, ...

  9. winform显示、隐藏任务栏及开始菜单

    private const int SW_HIDE = 0; //隐藏 private const int SW_RESTORE = 9;//显示 /// <summary> /// 获取 ...

  10. SQL基础教程（第2版）第4章 数据更新：4-4 事务

    ●事务是需要在同一个处理单元中执行的一系列更新处理的集合. ● 事务处理的终止指令包括COMMIT(提交处理)和ROLLBACK(取消处理)两种. ● DBMS的事务具有原子性(Atomicity). ...