首頁 > web前端 > html教學 > 数往知来 CSS<十二>_html/css_WEB-ITnose

数往知来 CSS<十二>_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:37:14
原創
1187 人瀏覽過

div+css基础

一、外部样式

外部样式

哈哈我又变帅了

--》要写样式的时候,用什么格式

属性:值;

--》学习属性,查、使用

二、标签选择器

使用内嵌样式或外部样式

标签名{

          //样式

}

凡是定义了标签悬着器的标签,都具有相同的样式

--》类选择器

    1、定义语法

         .类名{

//样式

}

如果需要使用在需要具备该属性的标签中加上一个class属性,值  就是该属性的类名

--》id选择器

    1、定义语法

          #id号{

    //样式

}

在要使用的地方加上id 属性即可

注意:使用的时候id只能有一个,而class可以有多个,对于三个选择器的使用,有一个规范

    1.同一的样式用标签

2.不同的样式用类

3.独有的样式用id(常常与JS一起 用)

2、选择器的声明

  --》集体声明

声明一个选择器,将所有需要这个属性的标记写在前面用逗号隔开

p,a,span,h1{

//样式

}

  --》全局声明

使用*号开头

     *{

         //样式

}

  --》嵌套声明

嵌套选择器可以将

  --将某一张表的样式改变

#tbl tr td{

//样式

}

    

--》伪选择器  (目前只能用在A标签上)

就是给一个标签,的某个状态添加样式的方法

语法:

标签:状态{

//样式

}

link     表示放上去以后

visited   点击以后

active    点击的时候

hover 鼠标放上去的时候

a:link,a:active{

          font-size:30px;

color:blue

text-decoration:none;

      }

a:hover{

          font-size:30px;

          text-decoration:underline;   color:red;   

}

a:active{

font-size:30px;

text-decoration:none;

color:green;

font-family:华文行楷;

}

四、文档流、定位

文档流就是从左往右从上到下的堆砌

position:fixed   脱离文档流

-->相对定位  absolute

相对定位脱离文档流,可以根据坐标定位带任何地方,位置只会停留在改变之前的地方,随着滚动条的拖动也会向上向下偏移。

#myid1{

border:1px solid;

border-color:red;

width:80px;

height:50px;

background-color:pink;

position:absolute;

right:0em;

bottom:0em;

}

--》绝对定位   fixed

绝对定位脱离文档流,可以根据坐标定位到任何地方,但是改变浏览器的时候需要js来控制,

不管滚动条怎么拖动其位置也不会改变

#myid1{

border:1px groove red;

background-color:orange;

width:100px;

height:50px;

position:fixed;

left;0px;

bottom:0px;

}

-->relative

坐标会根据脱离文档流之前的位置偏移。

#myid4{

border:1px outset cyan;

background-color:azure;

width:150px;

height:100px;

position:relative;

left:100px;

top:100px;

}

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板