安徽省网站建设公司,天津企业做网站多少钱,北京网络推广平台,关于旅行的网站怎样做目录 1.css样式的规则 2.引入css样式的方式 1)行内式 2)内嵌式 3)外链式 1-link导入 2-import导入 4)总 3.css基础选择器 1)标签选择器 案例#xff1a;使用标签选择器编写一个圆 1.代码 2.效果 2)类选择器 案例#xff1a;使用类选择器为div添加背景色 1.代码 2.效果 3)id… 目录 1.css样式的规则 2.引入css样式的方式 1)行内式 2)内嵌式 3)外链式 1-link导入 2-import导入 4)总 3.css基础选择器 1)标签选择器 案例使用标签选择器编写一个圆 1.代码 2.效果 2)类选择器 案例使用类选择器为div添加背景色 1.代码 2.效果 3)id选择器 案例使用id选择器做一个三角形 1.代码 2.效果 1.css样式的规则
css的作用是对页面的样式进行修改,这就需要我们能够找到对应的标签引入选择器概念选择器作用就是标记标签标记之后可以用css进行对标签进行修饰 注: div是盒子模型,color属性是控制字体的颜色font-size是控制字体的大小 2.引入css样式的方式
1)行内式 通过style属性设置标签样式. 2)内嵌式
将css写在head标签中并且使用style标签 效果图: 3)外链式
1-link导入
通过link标签引入外部的css样式对标签进行修改 效果图 2-import导入
在style标签通过 import 导入外部文件 style typetext/css import css路径 /style style typetext/css import url(css路径) /style 4)总 !DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleCss引入的方式/title style p{ color: blue; } /style !-- 使用link标签 -- link relstylesheet href./style.css/link /head body !-- 内联样式 -- h2内联式/h2 div style width: 200px; height: 200px; background-color: cadetblue; /div hr colorred size5 / !-- 内嵌式 -- p 这是内嵌式的p标签/p hr colorgreen size5 / !-- 外链式 -- h1这是外联式的标签h1/h1 /body /html h1{ color: aqua; } 效果图 3.css基础选择器
1)标签选择器 通过标签名字进行标记并且进行修饰 案例使用标签选择器编写一个圆
1.代码 !DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title标签选择器/title style div{ background-color: aqua; border: 50%; width: 200px; height: 200px; } /style /head body div /div /body /html 注 border-radius: 50%; 这个是边框的弯曲程度 background-color这个属性是标签的背景颜色
2.效果 2)类选择器 通过标签的class属性进行标注 案例使用类选择器为div添加背景色
1.代码 !DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title类选择器/title style .myBox{ width: 200px; height: 200px; background-color: cadetblue; } /style /head body !-- 这是一个正方形 -- div classmyBox /div /body /html 2.效果 3)id选择器 通过标签的id属性进行选择标注
注id选择器使用#进行标识后面是名字 案例使用id选择器做一个三角形
1.代码
注: border-left 是左边的边框 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleid选择器/titlestyle#myDiv {width: 0px;height: 0px;border-left: 100px solid transparent;border-right: 100px solid transparent;border-top: 200px solid rgb(25, 128, 231);}#myDiv2 {width: 0px;height: 0px;border-left: 100px solid transparent;border-right: 100px solid transparent;border-bottom: 200px solid rgb(25, 128, 231);}#myDiv3{width: 0px;height: 0px;border-top: 100px solid transparent;border-bottom: 100px solid transparent; border-left: 200px solid rgb(248, 129, 32);}#myDiv4{width: 0px;height: 0px;border-top: 100px solid transparent;border-bottom: 100px solid transparent; border-right: 200px solid rgb(248, 129, 32);}/style
/head
body!-- 倒三角 --div idmyDiv/div!-- 正三角 --div idmyDiv2/div!-- 左三角 --div idmyDiv3/div!-- 右三角 --div idmyDiv4/div
/body
/html 2.效果
