文档章节

CSS 简介

人间四月
 人间四月
发布于 2015/11/30 14:10
字数 940
阅读 8
收藏 0
点赞 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
朝阳
程序员
CSS完成一个文章网页的布局教程

我们先分析一下整个网页的结构,整体内容采用的是一个两列布局,导航无限延长的背景,并且添加了分割符号 素材: 第一步: 去掉默认的HTML间距。 *{padding:0;margin:0;} Ps(我们可以在后期进...

bjjiefei ⋅ 2016/09/07 ⋅ 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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

骰子游戏代码开源地址

因为阿里云现在服务器已经停用了,所以上面的配置已经失效。 服务端开源地址:https://gitee.com/goalya/chat4.git 客户端开源地址:https://gitee.com/goalya/client4.git 具体运行界面请参考...

算法之名 ⋅ 24分钟前 ⋅ 0

设计模式--装饰者模式

装饰者模式 定义 动态地给一个对象添加一些额外的职责。就增加功能来说,装饰模式相比生成子类更为灵活。 通用类图 意图 动态地给一个对象添加一些额外的职责。就增加功能来说,装饰模式相比...

gaob2001 ⋅ 今天 ⋅ 0

JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa ⋅ 今天 ⋅ 0

sbt网络问题解决方案

转自:http://dblab.xmu.edu.cn/blog/maven-network-problem/ cd ~/.sbt/launchers/0.13.9unzip -q ./sbt-launch.jar 修改 vi sbt/sbt.boot.properties 增加一个oschina库地址: [reposit......

狐狸老侠 ⋅ 今天 ⋅ 0

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 今天 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 今天 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

深入Java多线程——Java内存模型深入(2)

5. final域的内存语义 5.1 final域的重排序规则 1.对于final域,编译器和处理器要遵守两个重排序规则: (1)在构造函数内对一个final域的写入,与随后把这个被构造对象的引用赋值给一个引用...

江左煤郎 ⋅ 今天 ⋅ 0

面试-正向代理和反向代理

面试-正向代理和反向代理 Nginx 是一个高性能的反向代理服务器,但同时也支持正向代理方式的配置。

秋日芒草 ⋅ 今天 ⋅ 0

Spring 依赖注入(DI)

1、Setter方法注入: 通过设置方法注入依赖。这种方法既简单又常用。 类中定义set()方法: public class HelloWorldOutput{ HelloWorld helloWorld; public void setHelloWorld...

霍淇滨 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部