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. CLR_Via_C#学习笔记之枚举

    CLR_Via_C#学习笔记之枚举 枚举类型(Enum)定义的一组"符号名称/值"配对:因为枚举类型使用程序更容易编写.阅读和维护,而且它是强类型: 枚举是值类型:由System. ...

  2. wp7之换肤原理简单分析

    wp7之换肤原理简单分析 纠结很久...感觉勉强过得去啦.还望各位大牛指点江山 百度找到这篇参考文章http://www.cnblogs.com/sonyye/archive/2012/03/12/2 ...

  3. 安装linux版qq，安装二进制包编译器，安装mysql-5.6.11,删除已安装或安装失败的mysql-5.6.11,简单mysql练习题

    上午[root@localhost ~]# ./test3.sh dev1^C[root@localhost ~]# groupadd dev1[root@localhost ~]# vim /etc ...

  4. 工具条OutLookBar

    工具条OutLookBar 灰姑娘本身也有自已的优点,但是却可能因为外貌不讨人喜欢,要变成白雪公主却需要有很多勇气和决心去改变自已: 有一颗善良的心 讨人喜爱的外貌 我这里讲的是一个工具条的蜕变过程, ...

  5. 更快的memcpy

    更快的memcpy 写代码有时候和笃信宗教一样,一旦信仰崩溃,是最难受的事情.早年我读过云风的一篇<VC 对 memcpy 的优化>,以及<Efficiency geek 2: co ...

  6. [每日一题] OCP1z0-047 :2013-07-15 drop column

    如下实验: gyj@OCM> Create table emp( 2    Empno     number(4)    not null, 3    First_name  varchar2( ...

  7. struts征程:1.初识struts2

    1.struts2在开发中所必须用到的jar包导入到项目的lib目录下 2.在web.xml中配置一个过滤器,代码格式如下 <filter> <filter-name>stru ...

  8. 看完这篇文章才对【GIT】有了大彻大悟的认识

    git定义:版本管理工具 历史:没有git的时候,我们修改完一个文件,要先把文件拷贝一个副本到备份文件夹中,还要建个文档来记录当前文件的信息和操作记录.当文件多的时候,人工操作起来将是个非常辛苦非常庞 ...

  9. Dubbo源码学习--注册中心分析

    相关文章: Dubbo源码学习--服务是如何发布的 Dubbo源码学习--服务是如何引用的 注册中心 关于注册中心,Dubbo提供了多个实现方式,有比较成熟的使用zookeeper 和 redis 的 ...

  10. unity3dWeb版文本转语音

    文本转语音 <script type="text/javascript"> function VioceSpeack(str) { var zhText = str; ...