分类信息程序

网页基础

css样式表分类、css选择器分类、css基础样式

2016-11-28 0:33:24网页基础

摘要:1 . 样式表 Cascading Style Sheet  css优势:  内容与表现分离  网页的表现统一,容易修改  丰富的样式,使网页布局更加灵活 &n

分享到:



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 . 基本的几个样式(常用于文本,图片,列表)
background背景
    1.background-color  背景色  (16进制数  rgb  rgba  英文名)
    2.background-image 背景图
    3.background-size 背景大小 (像素、百分比)
    4.background-repeat  (repeat-x  repeat-y  no-repeat)
    5.background-position  (通过方向值来指定,通过百分比指定,通过确切的像素值指定)
    6.background-attachment  是否随着浏览器滚动,使用它图片会相对浏览器固定住(bg-position和bg-attachment不要一起使用)
    7.background复合属性  可以把之前的属性定义在这一个里面,【一般书写顺序:颜色、图片、是否重复、是否固定、位置】

color颜色

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

font字体

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

 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> ;