1 . 样式表  Cascading Style Sheet
     css优势:
  • 内容与表现分离
  • 网页的表现统一,容易修改
  • 丰富的样式,使网页布局更加灵活
  • 减少网页代码量,增加网页的浏览速度,节省网络带宽
  • 使用独立于网页的CSS,有利于网页被搜索引擎收录
  • 嵌入ID>外部ID>嵌入class>外部class>嵌入标签>外部标签
    1.1  引入方式
           四种
  • style=""  行内样式表
  • <style>   内部样式表
  • <link rel="stylesheet"  href="" />  外部样式表  (使用最多)
  • <style>@import ""</style>  导入方式,尽量不要使用!!!
    1.2  引入方式优先级
          行内>内部>外部>导入
 
    1.3  链接式和导入式的区别:
  • <link/>标签属于XHTML,@import属于CSS2.1;
  • 使用<link/>链接的CSS文件先加载到网页当中,再进行编译显示;
  • 使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页中;
  • @import是CSS2.1特有的,对于不兼容CSS2.1的浏览器来说就是无效的;
 
2.  选择器
    2.1 哪几种选择器和它的优先级
         ID选择器  #   一个HTML文档中只能有一个相同名字的ID
         CLASS选择器  .  可以有多个
         元素    p  
          通配符  *  
   2.2 选择器的优先级
         ID > CLASS > 元素 > *
 
 
3 . 基本的几个样式(常用于文本,图片,列表)
  1. background背景
  1. 1.background-color  背景色  16进制数  rgb  rgba  英文名)
  1. 2.background-image 背景图
  1. 3.background-size 背景大小 (像素、百分比)
  1. 4.background-repeat  repeat-x  repeat-no-repeat
  1. 5.background-position  (通过方向值来指定,通过百分比指定,通过确切的像素值指定)
  1. 6.background-attachment  是否随着浏览器滚动,使用它图片会相对浏览器固定住(bg-positionbg-attachment不要一起使用)
  1. 7.background复合属性  可以把之前的属性定义在这一个里面,【一般书写顺序:颜色、图片、是否重复、是否固定、位置】

color颜色

  1. color  规定文本的颜色
  2. opacity  设置元素的透明度  ,1不透明   0完全透明

font字体

  1. font-style 指定文本的字体样式(正常、斜体
  2. font-variant 指定文本是否为小型的大写字母(对英文起作用)
  3. font-weight 指定文字的粗细(只有两种样式)  bold  粗体
  4. font-size 指定文本字体大小
  5. font-family 定义文本使用某个字体

中文字体font-family常用列表http://www.cnblogs.com/jihua/p/cnfont.html

 font 复合属性

   一般顺序:字体样式、是否为小号大写字、字体粗细、字号、字体

 

text文本属性

color , text-align , line-height ,  letter-spacing , vertical-align ,text-indent ,text-decoration ;

-----【vertical-align----->1. 常用于文本框input ,2. 结合{display:table-cell;}可用于将图片垂直居中 】

-----【valign----->只适用于table中的单元格,例如<td valign='top' height='100px'>this is cell</td> 】

-----【align----->适用于<hr/>,例如:<hr align="right" width="200" size="20" color="pink"/> ;

         <table>,例如:<table border="1" width="300" align="center">······</table> ;

         <img/>,例如:<img src="ika.jpg" align="top" alt=""/> <span>文本相对于图片顶部显示 </span> ;

         ·····等等,不再一一列举;】

 
 
 
 
 
<------学习笔记,如有错误,谢谢指正!------->
 

css样式表分类、选择器分类、css基础样式的更多相关文章

  1. css样式表的选择器与分类

    css 样式表的作用: 主要用于结构,样式与行为,CSS主要的作用就是美化网页的一个语言,它的特点: 1.结构与样式分离的方式,便于后期维护与改版; 2.样式定义精确到像素的级别; css样式表的结构 ...

  2. CSS篇-样式表、选择器、权重、伪类

    CSS定义 CSS:Cascading Style Sheet(层叠样式表) // 写法 选择器 { 属性名: 属性值; } CSS样式表 (1)三种样式表使用 // 内联样式 <div sty ...

  3. CSS样式----图文详解:css样式表和选择器

    主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...

  4. CSS样式----css样式表和选择器(图文详解)

    本文最初于2015-10-03发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样 ...

  5. css 03-CSS样式表和选择器

    03-CSS样式表和选择器 #本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS几 ...

  6. CSS.02 -- 样式表 及标签分类(块、行、行内块元素)、CSS三大特性、背景属性

    样式表书写位置  内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...

  7. CSS:CSS样式表及选择器优先级总结

    我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...

  8. css样式表和选择器的优先级以及position元素属性值的区别

    css样式表优先级 问题:当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢? 答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权. 1.浏览器缺省 ...

  9. 关于CSS各种选择器,还有各种引入样式表的区别,import导入样式表,在介绍一些伪类选择器

    (一)CSS选择器: 1.标签选择器:通过HTML的标签名直接选择该标签 2.类选择器:通过.选择器的名称{} 来对添加了class属性的标签进行选中 3.ID选择器:通过#选择器的名称{} 来对添加 ...

  10. CSS样式表及选择器相关内容(二)-伪类与伪元素选择器

    伪类与伪元素选择器归纳: 一.伪类选择器(伪类以":"开头,用在选择器后,用于指明元素在某种特殊的状态下才能被选中)    1.a标签伪类选择器,其他标签类似        eg: ...

随机推荐

  1. <td valign="center" align="left">

    单元格对齐方式:垂直居中,水平居左.

  2. ab 轻量的压测工具

    阅读:http://www.cnblogs.com/luminji/archive/2011/09/02/2163525.html

  3. 【bzoj3531】 [SDOI2014]旅行

    题目描述 S国有N个城市,编号从1到N.城市间用N-1条双向道路连接,满足从一个城市出发可以到达其它所有城市.每个城市信仰不同的宗教,如飞天面条神教.隐形独角兽教.绝地教都是常见的信仰.为了方便,我们 ...

  4. AJAX 请求区分 $_SERVER['HTTP_X_REQUESTED_WITH'] 小解

    关于这个内容,很多人都有所了解.但从我搜索的内容来看,他们只是略微看一下,根本不知道里面到底是什么情况. 受到很多模版代码的影响,大家都以为PHP有这样一个自定义变量:$_SERVER['HTTP_X ...

  5. Linux C 中 fork() 函数详解

    一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源.fork() 函数通过系统调用创建一个与原来进程几乎完全相同的进程,也就是两个进程可以做完全相同的事,但如果初始参数或者传入的变量不同 ...

  6. 2016年11月28日--ADO.Net 查、插、删、改 小练习

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  7. Opera Browser -- Access Restricted Sites using Free VPN /Free VPN Services List

    Opera Browser  -- Access Restricted Sites using Free VPN: currently the feature is available in Oper ...

  8. java2

    1:关键字(掌握) (1)被Java语言赋予特定含义的单词 (2)特点: 全部小写. (3)注意事项: A:goto和const作为保留字存在. B:类似于Notepad++这样的高级记事本会对关键字 ...

  9. testng教程之testng.xml的配置和使用,以及参数传递

    昨天学习了一下testng基础教程,http://www.cnblogs.com/tobecrazy/p/4579414.html 昨天主要学习的是testng 的annotation基本用法和生命周 ...

  10. ffmpeg-20160828-bin.7z

    ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 4 屏幕1/4大小 5 屏幕横向放大 20 像素 6 屏幕横向缩小 20 像素 S 下一帧 [ -2秒 ] +2 ...