码迷,mamicode.com
首页 > Web开发 > 详细

DIV+CSS笔记(一)

时间:2016-05-27 20:21:54      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:

CSS层叠样式表

  1.在HTML中放置CSS的几种方式  

    1>内联样式表  

1 <p style="color:red;font-family:serif">这是内联样式表</p>

    2>嵌入样式表 

1 <head>
2     <style type="text/css">
3            body{
4                  background-color:red;
5            }
6     </style>
7 </head>    

    3>链接到外部样式表

1 <link rel="stylesheet" href="style.css" type="text/css" />

样式表优先级(就近原则):内联 > 内嵌 > 外链

  2.CSS选择器

    1>HTML选择器

1 h1{color:red}

    2>类选择器

1 .class1{font-size:small}

    3>ID选择器

1 #id1{text-indent:3em}

    4>关联选择器

1 table a{color:red}

    5>组合选择器

1 h1,h2,h3,h4,h5,h6{color:green}

    6>伪元素选择器

1 a:link{color:red;}
2 a:hover{color:yellow;font-size:125%}
3 a:active{color:blue;font-size:125%}
4 a:visited{color:green;font-size:85%}

选择器优先级: 关联选择器 > ID选择器 > 类选择器 > HTML选择器

  3.CSS常见属性

    1>字体属性

      font-family、font-size、font-style、font-weight、font-variant

    组合  font:[<字体风格>||<字体变形>||<字体加粗>]?<字体大小>[/<行高>]?<字体族科>

    2>颜色属性

       color:blue;  color:#000080;  color:#0c0;

    3>背景属性

       background-color、background-image、background-repeat、background-attachment、background-position

    组合  background:<背景颜色>||<背景图像>||<背景重复>||<背景附件>||<背景位置>

    4>文本属性

       letter-spacing、word-spacing、text-decoration、text-align、text-indent、line-height

    5>边框属性

       border-style:none(无边框)dotted(点线)dashed(破折线)solid(实线)double(双框线)groove(槽线)ridge(脊线)inset(内嵌效果)outset(突起效果)

       border-width边框宽度

       border-color边框颜色

    组合  border:5px solid red;

    6>鼠标光标属性

       cursor属性: hand(小手)crosshair(交叉十字)text(文本选择器号)wait(Windows沙漏)help(问号鼠标)

    7>列表属性

       list-style-type、list-style-image、list-style-position

DIV+CSS笔记(一)

标签:

原文地址:http://www.cnblogs.com/yexiang520/p/5535760.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!