8.8 CSS知识点1
什么是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的更多相关文章
- 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
- 这些HTML、CSS知识点，面试和平时开发都需要 No5-No7
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
- 这些HTML、CSS知识点，面试和平时开发都需要 No8-No9
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
- 这些HTML、CSS知识点，面试和平时开发都需要 No10-No11
系列知识点汇总 1.基础篇 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5- ...
- css知识点
css知识点 一.盒模型知识 border: 边框 border-width:边框的宽度 border-color:边框的颜色 border-style:边框的线型 border-top:上边框 bo ...
- CSS知识点集锦
CSS知识点集锦 CreateTime--2016年9月29日09:43:10Author:Marydon UpdateTime--2017年3月21日08:03:13 2.CSS样式优先级问题 ...
- 这些HTML、CSS知识点，面试和平时开发都需要 No8-No9（知识点：媒体操作、构建表单）
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
- 这些HTML、CSS知识点，面试和平时开发都需要 No10-No11（知识点：表格操作、代码编写规则）
系列知识点汇总 1.基础篇 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5- ...
- 这些HTML、CSS知识点，面试和平时开发都需要 No5-No7（知识点：文字设置、设置背景、数据列表）
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
- 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）
这些HTML.CSS知识点,面试和平时开发都需要 No1-No4 系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...
随机推荐
- (实用篇)PHP定时任务获取微信access_token
最近开发微信公众平台,公众号调用各接口时都需使用access_token,access_token是公众号的全局唯一接口调用凭据,开发时需要进行妥善保存. access_token有效期为7200秒 ...
- 项目中如果管理前端文件CSS和JS
如何管理CSS和JS文件,一直是前端一个热门的话题.下面将简单分享一下使用心得,欢迎大家吐槽.拍砖和提供更好的实现方式. 一.管理CSS文件,本博客将讨论less管理. iReset.less.iBu ...
- JDK源码解读之toUnsignedString
我们知道,所有整数都是通过二进制编码的形式存储在内存中的.比如32位的整数,最高位是符号位,0代表正数,1代表负数. 那么怎么才能够将整数的二进制编码形式打印出来呢?Integer类提供了一个公有静态 ...
- tomcat 清理日志
clear_log.sh #!/bin/bash #clear tomcat logs #log size (1M bytes),if lt, clear LOG_FILE_SIZE=1024000 ...
- HDFS介绍
一.HDFS概述 1.HDFS设计思想来源于Google的GFS,是GFS的开源实现. 2.HDFS要解决的问题: -存储超大文件,比如TB级别 -防止文件丢失. 3.HDFS的特点 -可以存储超大文 ...
- WCF实现客户端自动更新-GenerateFileList
GenerateFileList using System; using System.Collections.Generic; using System.Diagnostics; using Sys ...
- UI Automator Viewer获取手机镜像时报错
使用UI Automator Viewer获取手机镜像时报错,具体信息如下: Error while obtaining UI hierarchy XML file: com.android.ddml ...
- 如何测试手机上的SOAP客户端
周四晚上,服务端和客户端的两个同事因为soap接口的问题争论了起来.服务端的同事认为客户端的同事发给服务端的soap消息的xml结构有问题,少了几个xml节点,导致服务器端解析出错.而客户端的同事认为 ...
- KVM虚拟机管理
#定义新的存储池 virsh pool-define-as spool4lj dir - - - - "/home/lj/spool4lj" virsh pool-build sp ...
- 圆形的Volley.NetworkImageView控件的实现
github上有个开源项目CircleImageView,可以简单的实现一个圆形的ImageView,就像qq头像那样. NetworkImageView是volley中的一个组件,可以方便的加载网络 ...