文档章节

CSS 简介

人间四月
 人间四月
发布于 2015/11/30 14:10
字数 940
阅读 9
收藏 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:字间距




© 著作权归作者所有

共有 人打赏支持
上一篇: CSS 简介
下一篇: Python 正则学习
人间四月
粉丝 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
H5AppWeX5学习路线图

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

棋帅小七
2017/12/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Ubuntu18.04 安装MySQL

1.安装MySQL sudo apt-get install mysql-server 2.配置MySQL sudo mysql_secure_installation 3.设置MySQL非root用户 设置原因:配置过程为系统root权限,在构建MySQL连接时出现错误:ERROR...

AI_SKI
今天
2
0
3.6 rc脚本(start方法) 3.7 rc脚本(stop和status方法) 3.8 rc脚本(以daemon方式启动)

3.6-3.7 rc脚本(start、stop和status方法) #!/usr/bin/env python# -*- coding: utf-8 -*-# [@Version](https://my.oschina.net/u/931210) : python 2.7# [@Time](https://my.oschina.......

隐匿的蚂蚁
今天
3
0
Cnn学习相关博客

CNN卷积神经网络原理讲解+图片识别应用(附源码) 笨方法学习CNN图像识别系列 深度学习图像识别项目(中):Keras和卷积神经网络(CNN) 卷积神经网络模型部署到移动设备 使用CNN神经网络进行...

-九天-
昨天
4
0
flutter 底部输入框 聊天输入框 Flexible

想在页面底部放个输入框,结果键盘一直遮住了,原来是布局问题 Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("评论"), ...

大灰狼wow
昨天
4
0
Kernel I2C子系统

备注:所有图片来源于网络 1,I2C协议: 物理拓扑: I2C总线由两根信号线组成,一条是时钟信号线SCL,一条是数据信号线SDA。一条I2C总线可以接多个设备,每个设备都接入I2C总线的SCL和SDA。I...

yepanl
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部