CSS的基础学习
CSS学习
--------学习资源
CSS语法检查http://jigsaw.w3.org/css-validator/
配置CSS的方法：
1.行内式
行内式通过直接设置元素的style属性来引入css
<div style="width: 100px; height: 100px;">行内式</div>
优点：元素的样式简单明了
缺点：代码不易维护
2.内嵌式
通过在head标签中加入style标签来引入CSS
<head>
<style type="text/css">
/*样式*/
</style>
</head>
缺点：不能被多个页面重复使用
3.链接式
通过link标签来引入CSS文件
<head>
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>
优点：页面在加载元素的同时也会加载其样式
缺点：增加了http请求
4.导入式
通过在head标签中加入style标签及@import来引入CSS
<head>
<style type="text/css">
@import""
</style>
</head>
缺点：导入式会在整个页面加载完毕后，再加载CSS文件，这样会导致页面在打开时，先显示的是无样式的页面，闪烁一下之后，页面才有了样式
CSS选择符和声明：
CSS语法基础
- CSS样式规则选择符
选择符可以是HTML元素名称，类名或id
- CSS样式规则声明
声明是你要设置的CSS属性（例如颜色）及其值
一个选择符要配置多个属性可以用分号（；）
例：body{color: blue; background-color: yellow}将网页配置成黄底蓝字
如果需要更多的颜色就可以参考http://webdevbasics.net/color的”网页安全调色板”
body{color: #3399cc; background-color: #FFFFCC}将网页配置成浅黄底中蓝字
配置内联CSS：
通过修改style实现
<body style=" color: #008080;">
但是如果在body内<p style="color: red">文本 </p>就会覆盖了body的全局样本。如果有10个段落都需要以这种方式配置，就会造成大量冗余代码，因此并不高效
配置嵌入CSS：
嵌入样式应用于整个网页文档，这种样式要放到网页head部分的<style>元素中。
例子：
<head>
<title>Trillium Media Design</title>
<meta charset="utf-8">
<style>
body{ background-color: #E6E6FA;color: #191970}、
h1{background-color: #AEAED4;color: #191970}
</style>
</head>
配置外部CSS：
当CSS位于网页文档外部的时候，CSS的灵活性与强大才真正的显露无疑。外部样式表是包含CSS样式的文本文件，使用.css拓展名。这种.css文件通过link元素与网页关联。因此多个网页可以关联一个.css文件。.css文件不包含任何HTML标记----它只含CSS样式规则
优点是只需在一个文件内配置样式
Link元素
Link元素位于网页的head部分，是独立标记(void标记).link元素使用三个属性：rel , href和type
- rel属性的值是”stylesheet”
- href属性的值是.css文件名
- type的属性的值是”text/css”,这个是CSS的MIME类型。Type在HTML5中可选，但在XHTML中必须
例如
<link rel=”stylesheet” href=”color.css”>
CSS的class, ID和后代选择符
------这些东西都要放在<style></style>里
例子 <style>
.feature{color : #FF0000;}
main p {color : #00ff00;}
#new {color: #FF00CC;}
</style>
Class选择符:
Class选择符配置一类CSS规则，并将其应用于网页的一个或多个区域，配置一类样式时，要将选择符配置成类名。在类名前添加句点符号（.）。类名必须以字母开头，可包含数字，连字号和下划线但是不能有空格，以下代码配置名为feature的一类样式
.feature{color: #FF0000;}
一类的样式可以应用于任何元素。这是使用class属性做到的
例：<li class=”feature”>123456</li>
ID选择符：
Class用于网页上多次响应使用，而id在每个网页上只能使用一次。配置id时记得在前面添加#号
#content{color:#333333;}
<div id=”content”>123456</div>
后代选择符:
用后代选择符在容器元素的上下文配置一个元素。
例如：将main元素中的段落配置成绿色文本
- main p {color : #00ff00;}
span元素
<span>元素在网页中定义一个上下不留空的内联区域。以<span>标记开头,以</span>结尾。适合格式化一个包含在其他区域（比如<p>
,<blockquote>或<div>)中的区域。
CSS的层叠（局部优先，作用范围越小越优先）
例如导入的.css中body { background-color: #FFFFCC（黄色）;
color: #000000（黑色）; }
但是同时又在html的head中定义
<style>
body { color: #0000FF（蓝色）; }
</style>
显示的页面为黄底蓝字
CSS的基础学习的更多相关文章
- CSS零基础学习笔记.
酸菜记 之 CSS的零基础. 这篇是我自己从零基础学习CSS的笔记加理解总结归纳的,如有不对的地方,请留言指教, 学前了解: CSS中字母是不分大小写的; CSS文件可以使用在各种程序文件中(如:PH ...
- CSS入门基础学习二
我们下午继续学习CSS的入门基础,搬上你的小板凳赶快进入吧! 一.背景(background) Background-color:背景颜色 background-image (背景图片) backgr ...
- CSS入门基础学习一
一.CSS样式 1.什么是CSS: CSS是指层叠样式表(Cascading Style Sheels),CSS通常为CSS样式表或层叠样式表,主要用于设置HTML文本内容,以及版本面的布局等 2.H ...
- 【HTML】实战阿里云src页面css模仿基础学习
实战结果页面gif图片 阿里云src首页模仿完整代码(500行左右) <!DOCTYPE html> <html> <head> <meta charset= ...
- 第六十九节，css入门基础
css入门基础 学习要点: 1.使用CSS 2.三种方式 3.层叠和继承 本章主要探讨HTML5中CSS (层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化. 一 使用CSS CSS ...
- Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...
- HTML&CSS基础学习笔记—创建列表
创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...
- CSS基础学习中的几大要点心得
CSS是前端学习中较为简单但又非常复杂的课程,说简单是因为学习它并不需要太多推理论证和逻辑思维,说它非常复杂则是更多的侧重在它的“杂”上,因为太多的格式和套路需要我们注意.以下谨列出本人在CSS学习中 ...
- HTML5移动开发学习笔记之CSS3基础学习
CSS回顾 在学CSS3之前首先巩固下CSS的基础知识. 1.CSS框模型 举例子: #box { width: 70px; margin: 10px; padding: 5px; } 这个代码将出现 ...
随机推荐
- pandas 学习 第6篇：DataFrame - 数据处理（长宽格式、透视表）
长宽格式的转换 宽格式是指:一列或多列作为标识变量(id_vars),其他变量作为度量变量(value_vars),直观上看,这种格式的数据比较宽,举个列子,列名是:id1.id2.var1.var2 ...
- 学习Python前言
先介绍下自己: 我是小芒果,在一家互联网公司上班 目前担任的是测试工程师职 自工作开始至今,已经3年之载 一路过来倒也轻松 期间学过几次python没一次能坚持下来 随着行业的饱和 测试技术的要求 以 ...
- Java关键字之abstract、final、static用法
abstract:即抽象的,可以修饰类.方法: 修饰类:当有一个方法为抽象方法时,这个类就是抽象类,抽象类不能被new,它是一个不完整的类. 修饰方法:这个方法就是抽象的,即只能方法的定义,没有方法的 ...
- DIY客户端框架
C/S类型的客户端做过好多轮了,在架构上每次都调整优化一部分,慢慢的形成了DIY的框架性东西. 可是最近这一看呢,已经不像MVC了,然后有一天看到了MVP概念,咦!很像.再一看,嗯,就该是MVP. M ...
- Troubleshooting ORA-1628 - max # extents (32765) reached for rollback segment <SEGMENT_NAME> (Doc ID 1580182.1)
Troubleshooting ORA-1628 - max # extents (32765) reached for rollback segment <SEGMENT_NAME> ( ...
- c语言程序设计第1章
开始记录自己学习c语言的过程,选用的教材是浙江大学何钦铭.颜晖编写的<c语言程序设计>(第3版). 一.第一个程序 /*求阶乘问题.输入一个正整数n,输出n!*/ #include< ...
- 6.GC垃圾回收算法和垃圾收集器的关系
JAVAGC垃圾回收机制和常见垃圾回收算法 推荐博客:JVM垃圾回收机制和常见垃圾回收算法 JVM的内存结构.垃圾回收算法
- vue阻止事件冒泡和默认事件
本文地址:https://www.cnblogs.com/guomin/p/9273862.html 原生js取消事件冒泡 try{ e.stopPropagation();//非IE浏览器 } ca ...
- [C4W1] Convolutional Neural Networks - Foundations of Convolutional Neural Networks
第一周 卷积神经网络(Foundations of Convolutional Neural Networks) 计算机视觉(Computer vision) 计算机视觉是一个飞速发展的一个领域,这多 ...
- vue-cli2 打包
npm run build 打包安装 相当于静态资源 解决vue-cli项目打包出现空白页和路径错误的问题 路径错误的问题解决方式: 打开config文件夹下的 index.js 找到如下图所示区域: ...