什么是CSS

CSS(Cascading Style Sheet) 层叠样式表

CSS3在CSS2的基础上增加了很多强大的新功能,目前主流浏览器都支持CSS3大部分功能。为了更好的向前兼容,不同的浏览器可能需要不同的前缀。

前缀 浏览器
-webkit chrome和Safari
-moz Firefox
-ms IE
-o opera

CSS能做什么

CSS把很多以前需要使用图片和脚本实现的效果、甚至动画效果,只需要短短几行代码就能搞定。

简化了前端开发人员的设计过程,更灵活的页面布局,更快的页面加载速度。

可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中相应的代码,那么整个站点的所有页面都会随之发生变动。

可以支持多种设备。

目的:将表现与结构分离。

CSS语法结构

CSS语法由三部分构成:选择符、属性和值

属性是你希望设置的样式属性,每个属性有一个值,属性和值用冒号分开。

Selector{Property:Value}

例:

<style type="text/css">
body{
background-color:#cccccc;
}
</style>

如何引入CSS

三种引入方式:

1.行内引用

行内引用是指将CSS样式编码直接写在HTML标签中的style属性里。

这种方式的引入CSS,不需要写选择器。

<body style="background-color:#cccccc;"> 

<h1 style="font-size:12px;color:#ff0000;">这是一个标题</h1>

2.页面引用

页面引用作为页面中的一部分,由<style></style>标签定位在<head></head>中。

<head>
<style type="text/css">
body {
background-color:#cccccc;
}
</style>
</head>

3.外部样式表

外部样式表是CSS应用中最好的一种形式,它将CSS样式代码单独放在一个外部文件中,再由页面进行调用。

style.css:

body {
background-color:#cccccc;
}

index.html:

<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

CSS优先级

三种引入方式的优先级对比

优先级依次是:就近原则

行内引用>页内引用>外部引用

CSS代码注释

CSS代码注释,以/*开始,*/结束。

如:

/* 公共样式*/
body { margin:0px; padding:0px;}
/*导航样式开始*/
#nav {
……
}
/*导航样式结束*/

选择符

1.通配选择符

*号表示所有的对象

所谓通配选择符,就是可以使用模糊指定的方式来对对象进行选择,指定样式。

* {
  color:blue;
  margin:0;
  padding:0;
}

2.元素选择符

所谓元素选择符,指以网页已有的标签作为名称的选择符。

body {}

h1 {}

p {}

3.群组选择符

除了可以对单个标签进行样式指定外,还可以对一组标签进行相同的样式定义。

h1,h2, h3, p {
  font-size:12px;
  font-family:arial;
}

使用逗号对选择符进行分隔。对页面中需要使用相同样式的地方,只需写一次样式。

8.8 CSS知识点1的更多相关文章

  1. 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  2. 这些HTML、CSS知识点,面试和平时开发都需要 No5-No7

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  3. 这些HTML、CSS知识点,面试和平时开发都需要 No8-No9

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  4. 这些HTML、CSS知识点,面试和平时开发都需要 No10-No11

    系列知识点汇总 1.基础篇 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5- ...

  5. css知识点

    css知识点 一.盒模型知识 border: 边框 border-width:边框的宽度 border-color:边框的颜色 border-style:边框的线型 border-top:上边框 bo ...

  6. CSS知识点集锦

      CSS知识点集锦 CreateTime--2016年9月29日09:43:10Author:Marydon UpdateTime--2017年3月21日08:03:13 2.CSS样式优先级问题 ...

  7. 这些HTML、CSS知识点,面试和平时开发都需要 No8-No9(知识点:媒体操作、构建表单)

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  8. 这些HTML、CSS知识点,面试和平时开发都需要 No10-No11(知识点:表格操作、代码编写规则)

    系列知识点汇总 1.基础篇 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5- ...

  9. 这些HTML、CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置、设置背景、数据列表)

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  10. 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML、CSS、盒子模型、内容布局)

    这些HTML.CSS知识点,面试和平时开发都需要 No1-No4   系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...

随机推荐

  1. sed详细分析

    [一.简单描述] sed命令类似命令行的文本编辑器,以行为单位(见注1).除非带命令i(in-place)否则源文件内容并不会被更新.   [二.使用] [2.1.使用方式] 存在两种使用方式: 1. ...

  2. linux dns 连外网

    以下设置对所用的Linux系统如Redhat/Ubuntu/Debian/CentOS等都有效,但您必须是管理员root或者具有管理员权限 vim /etc/resolv.conf 在其中加入: na ...

  3. 设置Android studio黑色主题

    设置: 如上图,点击[Theme]下拉选项,选中[Darcula]主题,点击[Apply]应用修改,弹出重启Android Studio生效修改.如图:

  4. ExpandableListView二级列表

    package com.example.dajj; import android.os.Bundle;import android.app.Activity;import android.view.M ...

  5. UVA 11235 频繁出现的数值 RMQ

    题目链接: http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...

  6. MapReduce介绍

    一.MapReduce模型 1.MapReduce是大规模数据(TB级)计算的利器,Map和Reduce是它的主要思想,来源于函数式编程语言. 2.Map负责将数据打散,Reduce负责对数据进行聚集 ...

  7. Python学习笔记——文件操作

    python中,一切皆对象.   一.文件操作流程 (1)打开文件,得到一个文件句柄(对象),赋给一个对象: (2)通过文件句柄对文件进行操作: (3)关闭文件. 文件对象f通过open()函数来创建 ...

  8. Vmware vsphere webservice sdk 连接打开慢的问题

    还在为VimService实例化速度慢的问题烦恼吗?这有一篇文章可以帮你解决问题,英文水平所限,就不翻译了,原文地址http://kb.vmware.com/selfservice/microsite ...

  9. 调试技巧--Windows端口号是否被占用

    调试技巧--Windows端口号是否被占用 一.端口概念 10.0.0.0~10.255.255.255,172.16.0.0~172.16.255.255, 192.168.0.0~192.168. ...

  10. nodejs项目在webstorm里进行debug的设定

    菜单 > Run > Edit Configurations... 菜单 > Run > Debug... 菜单 > Run > Edit Configuratio ...