1. [代码]css基础教程     
CSS基础语法
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.
每条声明由一个属性和一个值组成.
每个属性有一个值.属性和值被冒号分开.
例如:下面这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素.
在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值.
h1 {color:red; font-size:14px;}//看见后面有分号,如果是一个属性或者这个属性在尾部可以不加分号,除了这两种情况必须加 不然页面是很错乱的
=======================
页面居中问题
可以先设置
body{margin:0 auto;}
有的浏览器即使设置这个也不会居中的那么就要加上这句DTD申明代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
===================
body和div背景设置问题
①、background-color//背景颜色属性
②、background-image:url('背景图片路径');//背景图片属性
body { background-color:blue;} p{ background-image:url('背景图片路径');} 
③、如果需要在页面上对背景图像进行平铺,可以使用 background-repeat 属性.
背景定位
可以利用 background-position 属性改变图像在背景中的位置.
下面的例子在 body 元素中将一个背景图像居中放置垂直平铺:
body
{ 
  background-image: url(http://www.iiwnet.com/logo.gif);
  background-repeat: repeat-y;//垂直方向平铺repeat-x水平方向的repeat两个方向都平铺 no-repeat都不平铺 
  background-position:center;//居中
}http://www.huiyi8.com/yanjiangzhici/​
body是标签名,background-color,background-image,background-repeat是属性,blue是属性值等
当然这些属性可以用一句话综合写起来 看下面属性综合写法
=================
多个标签组合
h1,h2,h3 {color:red;}//是逗号分开的 一般用在有的标签样式一样就可以写在一起这样就减少代码的使用,能重复调用
把标题<h1><h2><h3>的字体颜色都变为红色
=================
属性综合写法演讲致辞
div {font:italic normal bold 11pt arial;}// 这是字体相关属性的综合写法
div的字体风格(font-style)属性值是italic,字体变量(font-variant)属性值是normal,字体浓淡(font-weight)属性值是bold,字体大小(font-size)属性值是11pt,字体名称(font-family)属性值是Arial
p{border:1px solid #dddddd}//这是边距属性综合写法 大小 样式(solid为实线 dashed为虚线 dotted为点线...还有自己总结)你看到没我这一句css代码结尾没分号;是可以的上面已经讲过了
================
标签嵌套
div h1 {color:blue;}
div里面的<h1>字体颜色为蓝色.
div是 h1的父亲 h1是div的儿子 我在写css样式都是用这样的为什么呢?
原因是你想想就知道了 世界有很多人难道都是你父亲吗 你用标签嵌套,即使这个父亲的儿子名字一样但是这个儿子还是这个父亲的不会是另个人的,所以当你嵌套了就不怕 在其他地方重复用这个标签名或类名(ID选择器是唯一的不能重复)
===============
定义id
#main {background:#ff0000;width:100%;}
<div id="main">hello</div>//那么直接调用#mian
这里是用#+id名是方式,也可以用标签名加+#+id名,如div#main,一般不这么用.
================
定义class
.red {color:red;}
<div class="red" >hello</div>
同id的写法差不多,把"#"改为"." ,如果一个标签同时定义了id跟class,id具有优先级.
*表示该标签下的所有元素样式
body * {padding:0px;}
用得比较少
================
好了没时间就总结这么多 最好要记住
样式优先级
(1) 标签中的style > id > class  
(2) 标签中的style > 页面中的style > 导入的样式@import 
(3) 用link,如<link rel='stylesheet' type='text/css' href='' />,更写在页面上同等级的.
  如果同样的样式定义了2次,后面出现的具有优先级.

CSS基础语法和CSS经常用到的知识点总结的更多相关文章

  1. CSS基础(html＋css基础)

    css: CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 1.CSS代码语法: css ...

  2. HTML 网页开发、CSS 基础语法——十.CSS语法

    CSS代码书写位置 • CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明 1.内联式 ① 内联式简介 •内联式,也被习惯叫做行内式. •书写位置:在 HTML 标签之上的 style 属性 ...

  3. XPath语法和CSS选择器介绍

    XPath语法 XPath 是一门在 XML 文档中查找信息的语言.XPath 可用来在 XML 文档中对元素和属性进行遍历.XPath 是 W3C XSLT 标准的主要元素,并且 XQuery 和 ...

  4. 最新区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法和Css if hack条件语法操作说明

    自从安装了IE8.0正式版本!木头 就对基本的几个 CSS HACK的做一下归纳!希望对网页前端布局DIV+CSS的实施者有所帮助! 本文就主要以:IE6+IE7+IE8+IE9+FF为主要研究对象 ...

  5. CSS基础3——使用CSS格式化元素内容的字体

    1.CSS属性单位: (1)长度单位:包含绝对长度单位和相对长度单位 绝对长度单位包含:cm.mm.in.pt.pc等. 绝对长度单位最好用于打印输出设备.在仅作为频幕显示时.绝对长度值并没有什么意义 ...

  6. css基础--简单介绍css

    --引入 什么是css? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解 ...

  7. CSS基础语法(三) CSS的6种特性

    样式表常用写法及特性(组合.继承.关联性.权值性.层叠性.重要性) 1.样式的组合:把具有相同声明定义的选择符组合在一起,并用逗号隔开.-例如:段落元素p.单元格元素td和类c1可以使用相同样式: p ...

  8. CSS基础语法(一) CSS的3种引入

    CSS样式表 CSS可算是网页设计的一个突破,它解决了网页界面排版的难题.可以这么说,HTML的Tag主要是定义网页的内容(Content),而CSS决定这些网页内容如何显示(Layout). Web ...

  9. CSS基础4——使用CSS格式化元素内容的文本

    CSS的文本属性用于控制文本的段落格式,如设置首行缩进.段落对齐方式.字间距.行间距等. 1.设置文本首行缩进:text-indent 可选属性值包含: 长度 / 百分比 2.设置文本对齐方式:tex ...

随机推荐

  1. codeforces #364c They Are Everywhere 尺取法

    C. They Are Everywhere time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  2. linux上复制行到另一个文件

    1.复制3行到5行数据到ab.sh文件,不覆盖ab.sh文件中的已有内容 :3,5w>>ab.sh 2.复制3行到5行数据到ab.sh文件,覆盖ab.sh文件中的已有内容 :3,5w!ab ...

  3. ELK之jason配置nginx文件等多个配置文件

    [root@web02 ~]# cat /etc/logstash/conf.d/nginx.conf input { file { path => "/var/log/nginx/a ...

  4. 第一篇： Ansible 介绍

    应用场景:   BOSS:运维帮忙把所有的服务器tomcat 重启一下,谢谢!(tomcat 服务有2K台) 运维:………… 运维:  啪啪啪啪啪啪啪啪..........(键盘的声音响彻办公室) B ...

  5. Lumen开发：结合Redis实现消息队列（2）

    上一篇讲了Lumen配置Redis,现在来讲一下,如何实现消息队列 2.编写任务类 2.1  任务类结构 默认情况下,应用的所有队列任务都存放在app/Jobs目录.任务类非常简单,正常情况下只包含一 ...

  6. POJ 286 Y2K Accounting Bug【简单暴力】

    链接: http://poj.org/problem?id=2586 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=26733#probl ...

  7. hibernate多对多关系配置

    一.创建用户,角色实体类. 一名用户可以有多个角色.一个角色可以对于多名用户. 用户实体类 public class User { private int uId; private String uN ...

  8. FPGA低温不能启动分析

    FPGA低温不能启动分析 现象描写叙述:在给medium板光端机做低温试验时,分别给发送版.接收板断电又一次启动,发现有的板子在-40°能够启动,而有些板子在-20°都不能启动.须要升高温度到0°以上 ...

  9. scala如何解决类型强转问题

    scala如何解决类型强转问题 scala属于强类型语言,在指定变量类型时必须确定数据类型,即便scala拥有引以为傲的隐式推到,这某些场合也有些有心无力. 例如: java同属强类型语言,但java ...

  10. 找到最大或最小的N个值

    对于python原生的数据类型来说,并不存在直接的方法可以找到最大或最小的N个值, 传统的方法必须先排序,然后再截取相应的值,而且对于集合这类数据类型来说还不能直接排序, 需要先转化为列表才行,有的时 ...