CSS三种引入方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三种引入方式</title>
<!-- 三种: 行间式 | 内联式 | 外联式 -->
<!-- <style type="text/css">
div { 200px; height: 200px; background-color: brown; } </style> -->
<link rel="stylesheet" type="text/css" href="01.css"> </head>
<body> <!-- 行间式 --> <!-- 1.在标签头部的style属性内 --> <!-- 2.属性值满足的是css语法 --> <!-- 3.属性值用key: value形式赋值,value具有单位 --> <!-- 4.属性值之间用;隔开 --> <!-- <div style=" 100px; height: 100px; </div> --> <!-- <hr style="" /> --> <!-- 内联式 --> <!-- 1.在style标签内(style标签一般作为head的子标签) --> <!-- 2.属性值满足的是css语法 --> <!-- 3.属性值用key: value形式赋值,value具有单位 --> <!-- 4.属性值之间用;隔开(一般独行分开赋值) --> <!-- 5.格式: 选择器{样式块} --> <!-- <div></div> -->
<!-- 外联式 --> <!-- 1.在外部css文件中 --> <!-- 2.属性值满足的是css语法 --> <!-- 3.属性值用key: value形式赋值,value具有单位 --> <!-- 4.属性值之间用;隔开(一般独行分开赋值) --> <!-- 5.格式: 选择器{样式块} --> <!-- 6.将html与css文件建立联系:html通过link标签链接外部css(一般head中链接) --> <div></div> </body>
</html>
三种引入间优先级 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三种引入优先级</title> <!-- 注:三种方式间没有优先级 --> <!-- 1.三种方式协同布局: --> <!-- 2.不重复的属性一定为唯一位置的唯一值 --> <!-- 3.重复的属性采用覆盖赋值,保留最后位置的属性值 --> <!-- 4.行间式一定是逻辑上最后被解析的位置(js正常操作的就是行间式) --> <!-- 5.!important会影响优先级 --> <style type="text/css"> div { 100px; height: 100px; background-color: yellow!important; } </style> <link rel="stylesheet" type="text/css" href="02.css"> </head> <body> <div style="</div> <!-- <div></div> --> </body> </html>
字体样式 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>字体样式</title> <style type="text/css"> span { /*大小*/ font-size: 30mm; /*字重: bold normal lighter 100~900*/ font-weight: 900; /*行高: 行高设置大于等于字体大小,字体在行高中垂直居中显示*/ line-height: 50mm; /*样式: 一般不关心*/ font-style: normal; /*字族:可以自定义字族*/ /*当Segoe UI Emoji不存在,或不起作用,再选取 微软雅黑 */ /*备用字族*/ font-family: "Segoe UI Emoji", "微软雅黑";
/*css语法: 空格隔开为多个值赋值, ,隔开为一个值多值赋值*/ font: lighter 50mm/80mm "Segoe UI Emoji", "微软雅黑"; } </style> </head> <body> <span>123abc呵呵</span> </body> </html>
长度及颜色单位 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>长度及颜色单位</title> <style type="text/css"> body { background-color: yellowgreen; } div { /*长度单位*/ /*px in pt mm cm em rem vw vh*/ 100px; 720pt; 10in 100mm; 10cm 10em; 通常160px 10rem 50vw; 50% view width height: 100px; /*颜色单位*/ 单词 rgb() rgba() #六个十六进制位 hsl() background-color: cyan; background-color: rgb(255, 0, 0); background-color: rgba(255, 0, 0, 0); 满足AABBCC形式可以简写为abc background-color: #a0c } </style> </head> <body> <div></div> </body> </html>
文本样式 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文本样式</title> <style type="text/css"> span { 颜色 color: red; 水平居中方式:left center right text-align: center; 字划线: underline line-through overline none text-decoration: overline; 字间距 letter-spacing: 3px; 词间距 word-spacing: 10px; } a { 应用场景 text-decoration: none; } div { 300px; 显示方式 display: inline-block; } div { font-size: 12px; 垂直排列方式: top baseline bottom 缩进 text-indent: 2em; } 遇到连体的英文,html将其解析为一个单词(作为一个整体) .div { 按标签的设定宽度强行换行,可以在单词(整体)内部换行 word-break: break-all; } h1 { text-align: center; } </style> </head> <body> <h1>标题</h1> <span>123 abc 呵呵</span> <!-- <a href="">123</a> --> <div>嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 </div> <div>red yellow green big small red yellow green big small red</div> <div class="div">abcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdef</div> </body> </html>
背景样式 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>背景样式</title> <style type="text/css"> div { 300px; height: 300px; background-color: red; } div { /*背景图片*/ background-image: url("data/bg_repeat.gif"); /*平铺: no-repeat repeat-x repeat*/ background-repeat: no-repeat; /*定位*/ /*10px == 10px center 设置一个值,第二个值默认为center*/ /*10px 10px 第一个值控制水平位置,第二个值控制垂直位置*/ /*background-position: right center;*/
/*定位相关的涉及到滚动时的效果: scroll fixed*/ background-attachment: fixed; } div { /*整体设置*/ background: url("data/bg_repeat.gif") 10px 10px no-repeat red; } </style> </head> <body> <div></div> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </body> </html>
CSS选择器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css选择器</title> <style type="text/css"> /*基础选择器*/ /*1.通配选择器(*): 匹配所有(html,body,body中的所有子标签)(具有显示效果的所有标签)*/ /** { border: solid; }*/
/*2.标签选择器(标签名):匹配指定标签名的对应所有标签*/ div { 100px; height: 100px; background-color: red; } section { 200px; height: 200px; background-color: yellow; }
/*3.类选择器(.):匹配指定类名对应的所有标签*/ .dd { font-size: 50px; }
/*4.id选择器(#):匹配指定id名对应的唯一标签*/ /*html,css都是标记语言,所有对id可以进行多匹配,但js是编程语言.只能匹配到一个*/ #ele { color: blue; }
总结: 1.通配选择器一般用于整体reset操作(reset操作:清除系统自定义样式) * { margin: 0; } /*2.标签与id选择器运用场景并不多,一般不提倡采用id选择器进行布局*/ /*3.类选择器为布局首选(建议基本全用class选择器进行布局)*/
/*基本选择器优先级:id > class > 标签 > 通配*/ /*目标对象:<div class="d" id="ele">d_2</div>*/ * { text-align: left; } div { text-align: right; } .d { text-align: center; } #ele { text-align: left; } </style> </head> <body> <div class="dd">d_1</div> <section>s_1</section> <div class="d" id="ele">d_2</div> <section class="dd">s_2</section> <span></span> </body> </html>
字体样式： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>字体样式</title> <style type="text/css"> span { 大小 font-size: 30mm; 字重: bold normal lighter 100~900 font-weight: 900; 行高: 行高设置大于等于字体大小,字体在行高中垂直居中显示 line-height: 50mm; 样式: 一般不关心 font-style: normal; 字族:可以自定义字族 当Segoe UI Emoji不存在,或不起作用,再选取 微软雅黑 备用字族 font-family: "Segoe UI Emoji", "微软雅黑";
css语法: 空格隔开为多个值赋值, ,隔开为一个值多值赋值 font: lighter 50mm/80mm "Segoe UI Emoji", "微软雅黑"; } </style> </head>` <body> <span>123abc呵呵</span> </body> </html>