文档章节

CSS 简介

人间四月
 人间四月
发布于 2015/11/30 14:10
字数 940
阅读 6
收藏 1
点赞 0
评论 0
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
博文 70
码字总数 30455
作品 0
朝阳
程序员
css3动画一些参考

《CSS动画简介》作者:阮国峰 http://www.ruanyifeng.com/blog/2014/02/csstransitionand_animation.html 用到的工具: http://jsfiddle.net/ruanyf/XfG4Y/1/light/ 《css3动画简介以及动画库......

子弹兄 ⋅ 2015/06/06 ⋅ 0

5个精致的 CSS 框架,你都知道么?

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

码云Gitee ⋅ 05/28 ⋅ 0

【CSS】-----div 和 span的区别

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

LYQ1990 ⋅ 03/08 ⋅ 0

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

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

码云Gitee ⋅ 04/25 ⋅ 0

完整的网页制作视频

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

杨胜强的号 ⋅ 01/22 ⋅ 0

史上最全的 Sublime Text 汉化、插件安装合集

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

mr_lp ⋅ 2017/03/24 ⋅ 0

H5AppWeX5学习路线图

WeX5简介 实战案例欢乐捕鱼App H5 App简介 实战案例Hello World App 实战案例记账本App 实战案例扫一扫App 实战案例仿淘宝App 页面基础 组件基础 布局组件 数据组件 列表组件 行组件 表单组件...

棋帅小七 ⋅ 2017/12/01 ⋅ 0

Scrapy 安装和使用

安装 新建scrapy项目 目录 scrapy模板 使用pycharm调试scrapy执行流程 scrapy 终端调试 xpath 使用 简介 节点关系 语法1 语法2-谓语 语法3 css选择器 css选择器1 css选择器2 css选择器3...

Meet相识_bfa5 ⋅ 2017/11/03 ⋅ 0

12-实现动画

在最后的一步中,我们将在我们创建的最高的模板代码中,通过接触CSS和JavaScript动画来增强我们的phonecat网络应用。 我们现在使用ngAnimal模块让应用变成可能。 我们也且通用的ng命令去自动...

刀狂剑痴 ⋅ 2015/08/27 ⋅ 0

滚动动画库--Scrollanim

简介 Scrollanim 是使用 CSS3 + JavaScript 实现的用于创建滚动动画的库,应用到元素上后,当此元素出现在浏览器可视区域时便会执行对应的动画。Scrollanim 是 Kissui 的一部分,所以使用 Sc...

匿名 ⋅ 2016/08/22 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

从 Confluence 5.3 及其早期版本中恢复空间

如果你需要从 Confluence 5.3 及其早期版本中的导出文件恢复到晚于 Confluence 5.3 的 Confluence 中的话。你可以使用临时的 Confluence 空间安装,然后将这个 Confluence 安装实例升级到你现...

honeymose ⋅ 16分钟前 ⋅ 0

用ZBLOG2.3博客写读书笔记网站能创造今日头条的辉煌吗?

最近两年,著名的自媒体网站今日头条可以说是火得一塌糊涂,虽然从目前来看也遇到了一点瓶颈,毕竟发展到了一定的规模,继续增长就更加难了,但如今的今日头条规模和流量已经非常大了。 我们...

原创小博客 ⋅ 今天 ⋅ 0

MyBatis四大核心概念

本文讲解 MyBatis 四大核心概念(SqlSessionFactoryBuilder、SqlSessionFactory、SqlSession、Mapper)。 MyBatis 作为互联网数据库映射工具界的“上古神器”,训有四大“神兽”,谓之:Sql...

waylau ⋅ 今天 ⋅ 0

以太坊java开发包web3j简介

web3j(org.web3j)是Java版本的以太坊JSON RPC接口协议封装实现,如果需要将你的Java应用或安卓应用接入以太坊,或者希望用java开发一个钱包应用,那么用web3j就对了。 web3j的功能相当完整...

汇智网教程 ⋅ 今天 ⋅ 0

2个线程交替打印100以内的数字

重点提示: 线程的本质上只是一个壳子,真正的逻辑其实在“竞态条件”中。 举个例子,比如本题中的打印,那么在竞态条件中,我只需要一个方法即可; 假如我的需求是2个线程,一个+1,一个-1,...

Germmy ⋅ 今天 ⋅ 0

Springboot2 之 Spring Data Redis 实现消息队列——发布/订阅模式

一般来说,消息队列有两种场景,一种是发布者订阅者模式,一种是生产者消费者模式,这里利用redis消息“发布/订阅”来简单实现订阅者模式。 实现之前先过过 redis 发布订阅的一些基础概念和操...

Simonton ⋅ 今天 ⋅ 0

error:Could not find gradle

一.更新Android Studio后打开Project,报如下错误: Error: Could not find com.android.tools.build:gradle:2.2.1. Searched in the following locations: file:/D:/software/android/andro......

Yao--靠自己 ⋅ 昨天 ⋅ 0

Spring boot 项目打包及引入本地jar包

Spring Boot 项目打包以及引入本地Jar包 [TOC] 上篇文章提到 Maven 项目添加本地jar包的三种方式 ,本篇文章记录下在实际项目中的应用。 spring boot 打包方式 我们知道,传统应用可以将程序...

Os_yxguang ⋅ 昨天 ⋅ 0

常见数据结构(二)-树(二叉树,红黑树,B树)

本文介绍数据结构中几种常见的树:二分查找树,2-3树,红黑树,B树 写在前面 本文所有图片均截图自coursera上普林斯顿的课程《Algorithms, Part I》中的Slides 相关命题的证明可参考《算法(第...

浮躁的码农 ⋅ 昨天 ⋅ 0

android -------- 混淆打包报错 (warning - InnerClass ...)

最近做Android混淆打包遇到一些问题,Android Sdutio 3.1 版本打包的 错误如下: Android studio warning - InnerClass annotations are missing corresponding EnclosingMember annotation......

切切歆语 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部