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. DES加密解密帮助类

    public class DESCrypto { /// <summary> /// 初始化des实例秘钥及向量 /// </summary> /// <param na ...

  2. C# 根据时间创建文件夹

    string file = ((fileNameIndex)index).ToString(); if (!Directory.Exists(HttpContext.Current.Server.Ma ...

  3. 自用类库整理之SqlHelper和MySqlHelper

    自用类库整理之SqlHelper和MySqlHelper 自用的SQLHelper和MySqlHelper,除一些通用方法外,封装了一些很实用的批量操作方法,简单介绍下 SqlHelper Execu ...

  4. RCP:如何把Preferences中的项从一个类别移动到另一个类别 2013-08-23 18:59 by Binhua Liu,

    RCP:如何把Preferences中的项从一个类别移动到另一个类别 前言 很久没写文章了,准备写一系列关于Eclipse RCP /Plugin的文章. 这些文章都是trouble shooting ...

  5. html5 “拖放”

    拖放主要是两个部分组成,drag:拖动,drop:放置!既抓取元素后拖到另一个位置! 要实现拖放首先要把被拖动元素设置为可拖动,既: draggbile="true" 然后要拖动什 ...

  6. asp.net mvc Route 使用自定义条件（constraints）禁止某ip登陆

    asp.net mvc Route 使用自定义条件(constraints)禁止某ip登陆 前言 本文的目的是利用Mvc route创建一个自定义约束来控制路由跳转实现禁止ip登陆,当然例子可能不合理 ...

  7. JSTL（JSP Standard Tag Library ，JSP标准标签库)

    JSTL标签之核心标签   JSTL(JSP Standard Tag Library ,JSP标准标签库)是一个实现 Web应用程序中常见的通用功能的定制标记库集,这些功能包括迭代和条件判断.数据管 ...

  8. 巧用百度Site App新组件为企业官网打造移动站

    一年前我曾经详细介绍过百度Site App,时隔一年的发展,Site App再一次发生了翻天覆地的变化:自定义程度更高.新增电话地图组件.增加流量统计.增加广告管家.生成APP客户端等功能,百度Sit ...

  9. ASM上的备份集如何转移到文件系统中

    刚看到一个有关asm备份集的迁移的问题.特地整理了一下 方法有两个. 方法一:使用rman,rman是一个非常好的工具,不仅仅是备份的作用,如果你只用rman作备份的话,有些浪费了. 通过rman里的 ...

  10. JSP标签<meta>的作用

    meta标签: meta标签共有两个属性,它们分别是http-equiv属性和name属性. name 属性 :<meta name="Generator" contect= ...