css开始
p{
   font-size:12px;
   color:red;
   font-weight:blod
}
p为选择符p{}又称选择器，指明网页中要应用样式规则的元素。属性和值之间用
":"分隔。注意：最后一条声明可以没有分号，但是为了以后修改方便，一般也加
上分号；为了使用样式更加容易阅读，可以将每条代码写在一个新行内。
css样式分为：内联式、嵌入式和外部式
内联式：css样式表就是把css代码直接写在现有的html标签中，如：
<p style="color:red">这里的文字是红色。</p>
注意要写在元素开始的标签里面，写后面是错误的。如：
<p>这里是红色</p style="color:red">
并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写
在一起，中间用分号隔开。如：
<p style="color:red;font-size:12px">这里文字是红色</p>
嵌入式：就是可以把css样式代码写在<style type="text/css"></style>标签之
间。如：
<style type="text/css">
span{
color:red;
}
</style>
嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写
在<head></head>之间。
外部式css样式（也可称为外联式）就是把css代码写一个单独的外部文件中，这个
css样式文件以".css"为扩展名，在<head>内（不是在<style>标签内）使用<link>
标签将css样式文件链接到html文件内。如：
<link href="base.css" rel="stylesheet" type="text/css" />
注意：1.css样式文件名称以有意义的英文字母命名，如main.css 
2.rel="stylesheet" type="text/css"是固定写法不可修改
3.<link>标签位置一般写在<head>标签内
优先级为：内嵌式>嵌入式>外部式 当然 也是需要视情况而定
嵌入式>外部式有个前提：嵌入式css样式的位置一定在外部式的后面。如：
<link href="style.css"...>代码在<style type="text/css">...</style>代码
的前面。总结来说就是就近原则（离被配置元素越近优先级别越高）
以上的优先级是有一个前提：内联式、嵌入式、外部式样式表中css样式是在的相
同权值的情况下。后面我会说什么是权值。
每一条css样式声明（定义）由两部分组成，形式如下：
选择器{
样式；
}
在{}之前的部分就是"选择器"，"选择器"指明了{}中的"样式"的作用对象，也就是
"样式"作用于网页中的哪些元素。
标签选择器其实就是html代码中的标签。如：<html>、<body>、<h1>、<p>、<img>
如：p{font-size:12px;line-height:1.6em;}
上面的css样式代码的作用：为p标签设置12px大小的字号，行间距设置1.6em的样
式
类选择器在css样式编码中是最常用到的。
语法：.类选择器名称{css样式代码;}
注意：1.英文圆点开头 2.其中类选择器名称可以任意起名（不要起中文噢）
使用方法：第一步：使用合适的标签把要修饰的内容标记起来，如下：
<span>胆大包天</span>
第二步：使用class="类选择器名称"为标签设置一个类，如下：
<span class="stress">胆大包天</span>
第三步：设置类选择器css样式，如下：
.stress{color:red;}/*类前面要加入一个英文圆点*/
在很多时候，id选择器都类似于类选择器，但是也有一些重要的区别：
1.为标签设置id="id"名称，而不是class="类名称"
2.id选择符的前面是#号而不是英文圆点.
学习了类选择器和id选择器之后感觉两者有很多相似之处，是不是可以通用呢？
相同点：可以应用于任何元素
不同点：1、id选择器只能在文档中使用一次，与类选择器不同，在一个html文档
中。id选择器只能用一次，而且仅有这么一次。可是类选择器可以使用很多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个
元素同时设置多个样式，但只可以用类选择器的方法实现，id选择器不可以的。
（不能使用id词列表）。
说简单点，就是你们不要特么的用id了，就用class吧！就用类选择器，不要特么
的用id了！
子选择器即大于符号(>)，用于选择指定标签元素的第一代元素。这个就是用来框
一个框框的~~~
包含选择器，即加入空格，用于选择指定标签元素下的后辈元素。如：
.first span{color:red;}看清楚中间有个空格！
请注意这个选择器与子选择器的区别，子选择器仅指它的直接后代，或者你可以
理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后
代选择器通过空格来进行选择，而子选择器通过">"进行选择。
总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
通用选择器是功能最强大的选择器，它使用一个(*)号指定，它的作用是匹配html
中任意标签元素字体颜色全部设置为红色：*{color}
伪类选择符是一个很有意思的选择符，它允许给html不存在的标签（标签的某种
状态）设置样式，比如我们给html中一个标签元素的鼠标滑过的状态来设置字体
颜色：a:hover{color:red;}
上面一行代码就是为a标签鼠标滑过的状态设置字体颜色变红。这样就会使文字加
入鼠标滑过字体颜色变为红色特效。
分组选择符：当你想为html中多个标签元素设置同一个样式时，可以使用分组选
择符（,）/*看清楚！这里是逗号！！！*/
例如：h1,span{color:red;font-size:20px;}

css基础和心得（一）的更多相关文章

  1. css基础和心得（三）

    OK!接下来我们分别说这些元素的意义.首先,什么是块级元素?在html中<div>,<p>,<h1>,<form>,<ul>和<li& ...

  2. css基础和心得（四）

     现在来说相对定位: 如果想为元素设置层模型中的相对定位,需要设置position:relaive(表示相对 定位),它通过left.right.top.bottom属性确定元素在正常文档流中便宜位 ...

  3. css基础和心得（二）

    css中的某些样式是具有继承性的.它允许样式不仅应用于某个特定html标签元素 而且应用于其后代.如: p{color:red;}  <p>dsffd<spans>sdfasd ...

  4. CSS基础知识之float

    前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...

  5. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  6. CSS基础总结

    CSS基础总结链接地址:http://segmentfault.com/a/1190000002773955

  7. CSS基础篇之了解CSS和它的基本属性

    CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...

  8. HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

  9. css 基础---选择器

    1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...

随机推荐

  1. golang切片slice

    切片slice是引用类型 len()函数获取元素的个数 cap()获取数组的容量 1.申明方式 (1)var a []int 与数组不同的是他不申明长度(2)s2 := make([]int, 3, ...

  2. iOS使用自定义字体的方法(内置和任意下载ttf\otf\ttc字体文件)

    最近做了个有关阅读的应用,使用了自定义字体,学习了一下这方面的知识. 1.首先是最简单也普遍的做法,打包内置字符库文件: 把字体库文件添加到工程,如font1.ttf添加到工程,然后在工程plist添 ...

  3. 简单的mvc之一：简单的开始

    mvc学习到现在,相对所学到的一系列的知识做一个总结,于是就有了这个标题—简单的mvc.文如名,写的是简单的mvc的知识,目标群也不言而喻.这一篇来个简单的开始,从头建立一个web项目,比如hello ...

  4. iOS 动画类型 笔记

    #pragma mark Core Animation - (IBAction)buttonPressed1:(id)sender { UIButton *button = (UIButton *)s ...

  5. 查看Tomcat版本

    在Tomcat的安装目录的bin目录下,有这么两个文件 version.bat    windows下的批处理文件 version.sh      Linux下的Shell脚本 在DOS窗口执行ver ...

  6. Socket通信之Java学习（一）

    最近从一篇博客中看到了Socket的介绍,是阿蜜果姐姐的博文:http://www.blogjava.net/amigoxie/archive/2007/02/11/99331.html,学习了下. ...

  7. spring.net AOP配置基础

    在第一篇中,我们用配置代理工厂的方式实现了面向切面记日志的功能.非常便捷的实现了AOP,但当我们需要对多个切入点配置通知的时候就需要声明多个代理工厂,这样导致配置文件内容过多,配置过程也很繁琐.spr ...

  8. Nhibernate1

    Nhibernate随手记(1) 学习Nhibernate的萌芽 今早有群里有人问Nhibernate的问题,没学过,刚好来了兴趣,无意很快在园子里下载到了一本Nhibernate3.0的电子书,内容 ...

  9. offsetWidth, offsetHeight, offsetLeft, offsetTop,clientWidth, clientHeight,clientX,pageX,screenX

    offsetWidth: 元素在水平方向上占用的空间大小.包括元素的宽度,内边距,(可见的)垂直滚动条的宽度,左右边框的宽度. offsetHeight:元素在垂直方向上占用的空间大小,包括元素的高度 ...

  10. linux memory release commands内存清理/释放命令

    linux 内存清理/释放命令 You could find reference from here: http://jingyan.baidu.com/article/597a06436a687f3 ...