DIV+CSS笔记

Posted 2020-07-14 Irving_yx

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DIV+CSS笔记相关的知识，希望对你有一定的参考价值。

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笔记的主要内容，如果未能解决你的问题，请参考以下文章