文档章节

CSS 简介

人间四月
 人间四月
发布于 2015/11/30 14:10
字数 940
阅读 6
收藏 1
CSS

简介:

CSS(Cascading Stytle Sheets)

    “层叠样式表”或“级联样式表”简称样式表,它允许网页设计者定义网页元素的样式,包括字体、颜色及其他高级样式。


样式表有一组决定显示格式的规格组成,这些规则用于定义网页中任何HTNL元素内容的显示格式。

一个CSS规则,由“选择器”和“格式申明语句”构成。

选择器:就是选择HTML标记,将要加样式的HTML标记

格式申明语句:由{}构成,{}中是各种格式语句

一条格式语句,有“属性名:属性值”构成,英文“;”结束

属性名,就是CSS中的各种属性,这些属性名都是固定的

属性值,一个属性名可以去不同的值,这个值不假引号

CSS中的数字单位是px,这个px不能省略


CSS选择器:

  1. 基本选择器:
    1. “*”选择器,通配符

      1. 描述:将匹配所有的HTML标记,所有的标记都会改变

      2. <style type="text/css">
          *{color:red;}
        </style>
      3. “*”尽量少用,IE6不支持

    2. 标签选择器

      1. 描述:将匹配指定的HTML标记

      2. 语法:

      3. <style type="text/css">
          h1{
          color:red;
          }
        </style>
      4. 注意:CSS标签选择器,与HTML标记的名称一样,但不能加<>

    3. class选择器(类选择器)

      1. 描述:给一类HTML标记加样式,每个HTML标记都有一个class属性,且class的值一样。class属性是公共属性,每个HTML都有。

      2.  类选择器的名称,必须以“.”开头,后跟HTML标记的class属性的值

    4. id选择器

      1. 描述:给制定id的元素添加样式

      2. 注意:网页中HTML标记的id属性的值,必须是唯一的,同一个id只能使用一次

      3. 每一个HTML标记中都有一个id属性

      4. 注意:id属性大多时候是给js来使用的;class只能给css用,不能给js使用

      5. id选择器的名称,必须以“#”开头,后跟HTML标记的id属性的值

  2. 组合选择器:
    1. 多元素选择器

      1. 描述:给多个元素加同一个样式,多个选择器之间用“,”隔开

      2. h1,p,div,body{ color:red; }

    2. 后代元素选择器

      1. 描述:给某个标签的某一个后代元素加样式,选择器之间用空格隔开

      2. div .title {color : red;}

    3. 子元素选择器

      1. 描述:给某个元素的子元素添加样式

      2. div>h1.title{color:red;}

  3. CSS伪类选择器(给链接加的样式,链接的不同状态加的样式):
    1. 一个超链接,有四个状态

      1. 正常状态(:link):在鼠标没放上之前链接的样式

      2. 放上状态(:hover):鼠标放到链接上是的样式

      3. 激活状态(:active):按住师表左键不松开的样式,这个状态特别短暂

      4. 访问过的状态(:visited):按下鼠标左键,并弹起,这是的样式效果

        1. a:link,a:visited{ color:#444; text-decoration:none; }      //正常状态和访问过的状态合并   

        2. a:hover{ color:#999999;text-decoration:underline; }    //鼠标放上单做效果


CSS尺寸属性:

  • width:元素宽度,一定要加px单位

  • height:元素高度


CSS字体属性:

  • font-size:文字大小,    fon-size:14px;

  • font-family:字体,    font-family:微软雅黑;

  • font-style:斜体,取值:italic,    font-style:italic;

  • font_weight:粗体,取值:bold,    font_weight:bold;


CSS文本属性:

  • color:文本颜色

  • text-decoration:文本修饰线,取值:none(无),underline(下划线),overline(上划线),line-through(删除线)

  • text-align:文本水平对齐方式,left,center,right

  • line-height:行高,固定值或者百分比

  • text-indent:首行缩进,    text-indent:28px

  • letter-spacing:字间距




© 著作权归作者所有

共有 人打赏支持
人间四月
粉丝 2
博文 74
码字总数 30455
作品 0
朝阳
程序员
5个精致的 CSS 框架,你都知道么?

CSS 框架是一个软件,它为你的 HTML 开发提供了许多选项以供使用,可能使得你开发网站或 web 程序更快速更简单。CSS 框架既有优点也有缺点,总的来说对于绝大多数使用者还是利大于弊。那么,...

码云Gitee
05/28
0
0
【CSS】-----div 和 span的区别

div和span div和span是非常重要的标签,div的语义是division“分割”; span的语义就是span“范围、跨度”。 CSS课程中你将知道,这两个东西,都是最最重要的“盒子”。 1 <div> 2 <h3>中国主...

LYQ1990
03/08
3
0
【码云周刊第 70 期】5个精致的 CSS 框架,你都知道么?

码云项目推荐 CSS 框架是一个软件,它为你的 HTML 开发提供了许多选项以供使用,可能使得你开发网站或 web 程序更快速更简单。CSS 框架既有优点也有缺点,总的来说对于绝大多数使用者还是利大...

码云Gitee
04/25
0
0
完整的网页制作视频

基础:http://edu.51cto.com/course/12283.html 进阶:http://edu.51cto.com/course/12338.html 课程目标在第一阶段HTML&CSS网页制作基础课程的前提下,力求通过一个实际网站页面的编写,让学...

杨胜强的号
01/22
0
0
史上最全的 Sublime Text 汉化、插件安装合集

0.前言 本文用于给新手小白用户指明前进方向,不用做商业推广。 其次,鼓励购买正版,拒绝盗版。 好了,口号喊完,接下来就直接开始正文。 1. Sublime Text 介绍 首先在开始前,先来介绍一下...

mr_lp
2017/03/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Bash重定向详解

Bash重定向详解 Bash的重定向指的是将命令的输入和输出导向不同地方,而不是默认的标准输入、标准输出和标准错误。Bash的重定向实际上是对标准输入、标准输出和标准错误的重置,进而将所需输...

小陶小陶
今天
3
0
EventBus原理深度解析

一、问题描述 在工作中,经常会遇见使用异步的方式来发送事件,或者触发另外一个动作:经常用到的框架是MQ(分布式方式通知)。如果是同一个jvm里面通知的话,就可以使用EventBus。由于Event...

yangjianzhou
今天
6
0
OpenCV图像处理实例:libuv+cvui显示摄像头视频

#include <iostream>#include <opencv2/opencv.hpp>#define CVUI_IMPLEMENTATION#include <cvui.h>extern "C"{#include <uv.h>}using namespace std;#define WINDOW_NAM......

IOTService
今天
3
0
openJDK之JDK9的String

1.openJDK8的String 先来看下openJDK8的String的底层,如下图1.1所示: 图1.1 底层上使用的是char[],即char数组 每个char占16个bit,Character.SIZE的值是16。 2.openJDK9中的String 图2.1...

克虏伯
今天
4
0
UEFI 模式下如何安装 Ubuntu 16.04

作者:知乎用户 链接:https://www.zhihu.com/question/52092661/answer/259583475 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 针对UEFI模式下安装U...

寻知者
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部