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. DotNetOpenAuth搭建OAuth2.0

    使用DotNetOpenAuth搭建OAuth2.0授权框架 标题还是一如既往的难取. 我认为对于一个普遍问题,必有对应的一个简洁优美的解决方案.当然这也许只是我的一厢情愿,因为根据宇宙法则,所有事物 ...

  2. Unknown

    鉴于自己的直觉总是很准,所以这次再相信一次好了 T1:我觉得极有可能考到的是 1.对于栈,队列的模拟: 2.数论(不是像gcd那样的题目,而是加法原理乘法原理斥容,或是极具数学推导的东西,当然有可能用 ...

  3. PHP实现一个简单url路由功能

    如果一个页面的内容呈现,需要根据url上传递的参数来进行渲染.很多时候可能是这样子写:xxx.com/xx?c=x&m=x& t=..,而我们看到的url往往是这样子的(以新浪微游戏的 ...

  4. Redis系统学习 二、数据结构

    一.字符串     1.在Redis里,字符串是最基本的数据结构.当你在思索着关键字-值对时,你就是在死锁着字符串数据结构.不要被名字给搞混了. 常见实例: set users:leto " ...

  5. java版微信公众平台自定义菜单创建代码实现

    微信公众平台自定义菜单创建代码实现—java版 搞了两天的自定义菜单,终于搞定了,现在分享下心得,以便后来者少走弯路...... 好了,先看先微信官方的API 官方写的很详细,但是我看完后很茫然,不知 ...

  6. Dragon Balls(hdu3635带权并查集)

    题意:n个城市有n个龙珠,T  a,b 代表将龙珠a移动到b城市,Q a代表查询龙珠a所在城市,该城市有多少颗龙珠,该龙珠移动了多少次. 注意:移动时是将龙珠所在该城市所有龙珠都移动,每个龙珠不会再回 ...

  7. mybatis逆向工程生成代码

    1 什么是逆向工程 mybaits需要程序员自己编写sql语句,mybatis官方提供逆向工程 可以针对单表自动生成mybatis执行所需要的代码(mapper.java,mapper.xml.po. ...

  8. 在gem5的full system下运行 x86编译的测试程序 running gem5 on ubuntu in full system mode in x86

    背景 上篇博客写了如何在gem5的full system模式运行alpha的指令编译的程序,这篇博客讲述如何在gem5的full system模式运行x86指令集编译的程序,这两种方式非常类似. 首先 ...

  9. Ecshop出现问题 includes\lib_main.php on line 1329 includes\lib_base.php on line

    php 5.3版本兼容问题不少,以上函数参数传递问题可以将lib_main.php on line 1329这句 $ext = end(explode('.', $tmp)); 改为 : $extsu ...

  10. Android零点一度的区别——Matrix

    2013-07-07 导语:Matrix是android中对图像绘制的处理(旋转.放缩.平移等等),貌似书本翻页就是用这种方式处理的 正文: 1.基于坐标(px,py)旋转degrees度, post ...