标签:code 水果 meta 元素选择器 美化 语法 pre 外部 --
1. CSS概述
cascading style sheets:层叠样式表
主要作用:用来美化html页面 html决定网页的骨架
语法在一个style标签中,填写css内容,最好将style标签写在head的标签中
2. CSS的选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <!-- <style> 选择器{ 属性名称1:属性的值; 属性名称2:属性的值; } 元素选择器: 元素的名称{ 属性名称:属性的值; 属性名称:属性的值; } ID选择器: 以#开头 ID在整个页面中必须是唯一的 #ID的名称{ 属性名称:属性的值 属性名称:属性的值 } 类选择器: .类的名称{ 属性名称:属性的值 属性名称:属性的值 } </style> --> <style> div0{ color:red; font-size: 50px; } span0{ color:blue; } #div1{ color:red; } .fruit{ color:pink; } </style> </head> <body> <div0>大家都很厉害哟</div0> <span0>好困啊</span0> <div id = "div1">JAVAEE</div> <div class = "fruit">水果</div> </body> </html>
3. CSS的引用方式
3.1 内部样式
3.2 外部样式
@CHARSET "UTF-8"; <style> div0{ color:red; font-size: 50px; } span0{ color:blue; } #div1{ color:red; } .fruit{ color:pink; } </style> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS外部引用</title> <link rel = "stylesheet" href = "style.css" /> </head> <body> <div0>大家都很厉害哟</div0> <span0>好困啊</span0> <div id = "div1">JAVAEE</div> <div class = "fruit">水果</div> <div style = "color:pink">小小小</div> </body> </html>
3.3 行内样式:示例见上
标签:code 水果 meta 元素选择器 美化 语法 pre 外部 --
原文地址:https://www.cnblogs.com/feng-ying/p/9671185.html