首页 > 代码库 > css学习入门篇（1）
css学习入门篇（1）
1.网页制作 的两大误区；【1】.网页用了Table，页面就不标准【2】.div标签越多越好。
解释：table是为了存储数据而div是为了架设页面 ，两者有不同的工作职能 。
2.W3C标准：他不是一个标准，而是一系列标准的组合：结构标准（代表语言HTML）、表现标准（CSS）、动作标准（JavaScript）。
3.css控制页面的四种方式：
【1】行内样式：<p style=" color: #F00; background: #CCC; font-size: 12px;">行内样式 </p>
缺点：每个标签都要设置style标签，导致文件体积较大，HTML不够 纯净，不利于搜索蜘蛛爬行，维护成本较高
【2】内嵌样式：
缺点 ：每个页面都要定义css代码，如果一个网站有很多页面，每个文件都很大，后期维护也很难度 也大
【3】链接样式：推荐使用
优点： 实现了页面框架HTML代码与表现CSS代码的完全分离，使得前期制作和后期维护都十分方便，并且如果要保持页面风格统一
【4】导入样式：
采用import样式导入CSS样式表
4.CSS选择器
【1】标签选择器：对标签统一声明css样式。
eg：
<!DOCTYPE html>
< html>
< head lang= "en" >
< meta charset= "UTF-8" >
< title>标签选择器 </ title>
< style type= "text/css" >
p {
font-size: 20 px; /*字体大小*/
background: #090; /*字体背景颜色*/
color: aqua; /*字体本身颜色*/
}
</ style>
</ head>
< body>
< p>标签选择器demo </ p>
<!-- <a href="http://www.w3cfuns.com/member.php?mod=register" target="_blank" id="reg"></a>-->
</ body>
</ html>
优点：对统一标签属性进行了统一设置
缺点：如果页面中除了某个标签和其他标签属性不是一直的，那么这样写就不行了
【2】ID选择器：ID具有唯一性，给标签起个ID更具有针对性。
eg：
<!DOCTYPE html>
< html>
< head lang= "en" >
< meta charset= "UTF-8" >
< title>标签选择器 </ title>
< style type= "text/css" >
#one {
font-size: 20 px; /*字体大小*/
background: #090; /*字体背景颜色*/
color: aqua; /*字体本身颜色*/
}
</ style>
</ head>
< body>
< p id= "one" >ID选择器demo</ p>
<!-- <a href="http://www.w3cfuns.com/member.php?mod=register" target="_blank" id="reg"></a>-->
</ body>
</ html>
优点：可以单独给某个标签定义属性，可以解决【1】中的弊端
【3】类选择器：就是给不同的标签赋予相同的css样式
eg：
<!DOCTYPE html>
< html>
< head lang= "en" >
< meta charset= "UTF-8" >
< title>标签选择器 </ title>
< style type= "text/css" >
. one{
font-size: 20 px; /*字体大小*/
background: #090; /*字体背景颜色*/
color: aqua; /*字体本身颜色*/
}
</ style>
</ head>
< body>
< p class= " one"> ID选择器demo</ p>
< div class= " one"> 此处为DIV标签内的文字</ div>
<!-- <a href="http://www.w3cfuns.com/member.php?mod=register" target="_blank" id="reg"></a>-->
</ body>
</ html>
备注：ID和class可以同时使用，只是ID是#开头，class是.开头
【4】通用选择器：对 整个HTML标签进行css样式定义
eg：
<!DOCTYPE html>
< html>
< head lang= "en" >
< meta charset= "UTF-8" >
< title></ title>
</ head>
< style>
* {
margin: 0; padding: 0;/*保证页面能够兼容多种浏览器，当然这样会影响性能，也可以用到那些就加那些*/
font-size : 20 px;
background :#000088 ;
color : brown ;
}
</ style>
< body>
< p>通用选择器 </ p>
< div>通用选择器 </ div>
</ body>
</ html>
备注：功能很强大，但是不够灵活，不建议使用
5.CSS选择器命名及常用命名：骆驼命名法，帕斯卡命名法，匈牙利命名法
命名是程序员最基本的，这里就不多做介绍，不了解的可以自己百度了解，很简单.
6.盒子模型：是XHTML+CSS布局页面中的核心！
刚开始接触的人来说理解可能有点晕，其实就是css标签中的四个属性：content(内容)、border(边框)、padding(内边距)、margin(外边距).
个人解释：我把一个网页当着是一个大的长方体，里面有很多小长方体，这些小长方体的写的内容就是content，小长方体的厚度我们理解为border，里面的内容和小长方体的距离我们认为是padding，小长方体和大长方体之间的距离可以认为是margin.
每个人理解方式不一样，可以选择其他的模型去帮助自己去记忆，最主要是去实战中不断用用这些标签属性帮助理解.
7.块状元素和内联元素：对定义理解可能觉得不好理解，在后续的实战中会慢慢理解，先理解定义，后面在写代码的过程慢慢对照定义深入理解
块状元素： 一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见块状元素为div和p。
内联元素：内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。常见内联元素为“a”.
本文出自 “8976098” 博客，请务必保留此出处http://8986098.blog.51cto.com/8976098/1610164
css学习入门篇（1）