文档章节

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:字间距




© 著作权归作者所有

共有 人打赏支持
人间四月
粉丝 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

没有更多内容

加载失败,请刷新页面

加载更多

活动招募 HUAWEI HiAI公开课·北京站-如何在4小时把你的APP变身AI应用

人工智能和机器学习是全球关注的新趋势,也是当前最火爆、最流行的话题。当你拿手机用语音助手帮你点外卖,智能推荐帮你把周边美食一网打尽;当你拿起P20拍照时,它将自动识别场景进行最美优...

华为终端开放实验室
11分钟前
0
0
匹配两位小数,js正则

var regex = /^\d*(\.[1-9]|\.\d[1-9])*$/ console.log(1.2,regex.test(1.2)); console.log(0.3,regex.test(0.3)); console.log(1.03,regex.test(1.03)); ......

微信小程序-暗潮
16分钟前
0
0
905. Sort Array By Parity - LeetCode

Question 905. Sort Array By Parity Solution 题目大意:数组排序,偶数放前,奇数在后,偶数的数之间不用管顺序,奇数的数之间也不用管顺序 思路:建两个list,一个放偶数,一个放奇数,最...

yysue
21分钟前
0
0
h5 禁止手机自带键盘弹出

html: <div style="width: 350px;margin:50px auto;"><input type="text" id="datePicker" class="date_picker form-control" placeholder="点击选择入住日期" /></div> js: $("#date......

Delete90
38分钟前
1
0
color透明度对照表

透明度百分比 数值 100% 不透明 FF 95% F2 90% E6 85% D9 80% CC 75% BF 70% B3 65% A6 60% 99 55% 8C 50% 80 45% 73 40% 66 35% 59 30% 4D 25% 40 20% 33 15% 26 10% 1A 5% 0D 0% 完全透明 ......

_无问西东
39分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部