CSS，层叠样式表，是对web页面显示效果进行控制的一套标准。当页面的内容受多种样式控制，将会按照一定的顺序处理。
CSS的作用：（1）将网页的内容结构和格式控制分开。（2）可以精确控制页面的所有元素。（3）使页面显示效果更加丰富
语法结构：CSS语法由选择符、属性和值三部分组成

<style type="text/css">
body { background-color: #cccccc }
↓ 　　　　 ↓ 　　　　　　　　 ↓
选择符　　 属性　　　　　　  值
<style>

CSS引用，三种方式

1.行内引用
直接写入html标签中：<body style="background-color:#ccccc;">
2.页内引用
将style标签定义在<head></head>之间：<head><style type="text/css ">body{ background-color:#cccccc;}</style></head>
3.外部引用
将CSS样式代码单独放在一个外部文件中，再由页面进行调用：
外部样式代码：body { background-color:#cccccc; }
在index中引用：
<head><link rel="stylesheet" type="text/css" href="style.css" /></head>

CSS优先级：1>2>3 (哪个样式近就用哪个)

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS优先级</title>

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

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

</head>
<body style="background-color:red;">

</body>
</html>

由以上结果可知：行内引用>页内引用>外部引用

CSS注释符：/* 注释内容 */

CSS选择符
(1)通配选择符： * { color:blue;margin:0;padding:0;}
* 号表示所有的对象

(2)元素选择符： body {} h1 {}
指以网页中已有的标签名作为名称的选择符

(3)群组选择符： h1,h2, h3, p {font-size:12px;font-family:arial;}
除了可以对单个标签进行样式指定外，还可以对一组标签进行相同的样式定义

CSS入门的更多相关文章

  1. [HeadFist-HTMLCSS学习笔记][第七章CSS入门：加一点样式]

    CSS入门 style元素设置CSS 基本格式 <style type="text/css"> body { background-color: #eaf3da; } ...

  2. CSS入门教程——定位(positon)

    CSS入门教程——定位(positon) CSS定位在网页布局中是起着决定性作用.   定位 CSS的定位功能是很强大的,利用它你可以做出各种各样的网页布局.本节就介绍一些CSS常用的定位语句. 1. ...

  3. 第六十九节，css入门基础

    css入门基础 学习要点: 1.使用CSS 2.三种方式 3.层叠和继承 本章主要探讨HTML5中CSS (层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化. 一 使用CSS CSS ...

  4. css入门二-常用样式

    css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...

  5. 胖虎都看得懂的CSS入门

    CSS入门 CSS是什么 摘自维基百科 层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表.级联样式表.串接样式表.层叠样式表.階層式樣式表,一种用来为结构化 ...

  6. 【Python全栈-CSS】CSS入门

    CSS入门教程 参考: http://www.cnblogs.com/yuanchenqi/articles/5977825.html http://www.ruanyifeng.com/blog/2 ...

  7. day 31 html(二) 和css入门

    前情提要: 本次主要是继续昨天学的简单的html 补充以及 css的简单入门 一:表单标签 >1:get请求 <!DOCTYPE html> <html lang=" ...

  8. HTML与CSS入门经典(第9版)试读 附随书源码 pdf扫描版​

    HTML与CSS入门经典(第9版)是经典畅销图书<HTML与CSS入门经典>的最新版本,与过去的版本相同,本书采用直观.循序渐进的方法,为读者讲解使用HTML5与CSS3设计.创建并维护世 ...

  9. css入门知识点整理

    css入门知识点整理 不要嘲笑我这个蒟蒻..例子来源:w3school css其实就分为两个东西,一个是选择器,另外一个是声明.声明定义了某个对象的属性的值,这都是html的内容.重点要关注的是选择器 ...

  10. H5教程（二），CSS入门（一）选择器

    这是我的第二篇博客,H5教程CSS入门,适合刚开始学习H5的新手,让我们共同进步. 1.  CSS简介 1.1  CSS是什么? CSS称为样式层叠表,是用于增强或控制网页样式,并允许将样式信息与网页 ...

随机推荐

  1. ABAP SPLIT

    注意: 假定'\'为分隔符 * '1'会分成1部分,值为1 * 分隔符之前的即使是空白或没有,也算一部分. 最后一个分隔符之后的,若有值会算一部分.若没有值,则不会算 比如'\1\'会分成2部分 '\ ...

  2. mac上eclipse用gdb调试(转)

    mac上eclipse用gdb调试 With its new OS release, Apple has discontinued the use of GDB in OS X. Since 2005 ...

  3. 类型转换bin()、chr()、ord() 、int()、float()、str()、repr()、bytes()、tuple(s )、 list(s )   、unichr(x ) 、 ord(x )  、 hex(x )  、          type()数据类型查询

    1.bin() 将整数x转换为二进制字符串,如果x不为Python中int类型,x必须包含方法__index__()并且返回值为integer: 参数x:整数或者包含__index__()方法切返回值 ...

  4. shell 从1加到100

  5. iscroll双重滚动，向上滚动隐藏一部分，下拉后显示

    最近项目需求:下面是页面,当用户向上滚动时候,[隐藏的]部分也向上滚动直至消失,这时候[标题]和[搜索框]在最顶部,而[内部的]可以继续滚动,而当[内部的]滚动到最顶部时候,也就是[这个是内部1]时候 ...

  6. 个推，手机推送API的使用

    参考:http://www.cnblogs.com/may-25/p/5501804.html 推送成功后返回的任务Id: String contentId = push.getContentId(m ...

  7. Codeforces Round #389 (Div. 2, Rated, Based on Technocup 2017 - Elimination Round 3) D. Santa Claus and a Palindrome STL

    D. Santa Claus and a Palindrome time limit per test 2 seconds memory limit per test 256 megabytes in ...

  8. 用SignalR实现实时查看WebAPI请求日志

    实现的原理比较直接,定义一个MessageHandler记录WebAPI的请求记录,然后将这些请求日志推送到客户端,客户端就是一个查看日志的页面,实时将请求日志展示在页面中. 这个例子的目的是演示如何 ...

  9. 一次java性能调优总结

    我们的系统中新开发了一个数据抽取的功能,东西做完后,一看执行时间那叫一个恼火.参考同类系统同样功能的执行时间,目标:将本地数据处理时间压缩到5秒以内.   第一步: 要想知道哪个地方需要优化,仅凭感觉 ...

  10. 装逼名词 bottom-half，软中断，preemptive选项

    bottom-half http://bbs.csdn.net/topics/60226240 在中断,异常和系统调用里看Linux中断服务一般都是在关闭中断的情况下执行的,以避免嵌套而是控制复杂化L ...