兴化市建设局网站,wordpress评论添加验证码,广州微信网站建设平台,适合小型网络公司的建站方式可以为项目代码 零、 CSS引出
CSS 教程 官方教学文档
1.在没有CSS之前#xff0c;我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性#xff0c;费心费力。所以CSS就出现了。
2.使用CSS将HTML页面的内容与样式分离提高web开发的工作效率#xff08;针对前端开发我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性费心费力。所以CSS就出现了。
2.使用CSS将HTML页面的内容与样式分离提高web开发的工作效率针对前端开发
3.CSS可以让html元素 样式 分离
一、CSS快速入门
1.引入案例
!DOCTYPE html
html langen
headmeta charsetUTF-8titlecss 快速入门/title!--1. 在head标签内出现了 style typetext/css/style2. 表示要写css内容3. div{} 表示对div元素进行样式的指定, div就是一个选择器(元素/标签选择器)4. width: 300px(属性); 表示对div样式的具体指定, 可以有多个5. 如果有多个使用; 分开即可, 最后属性可以没有; 但是建议写上6. 当运行页面时div就会被 div{} 渲染修饰7. 小经验在调试css时可以通过修改颜色或者大小来看8. css的注释是 /* */ ,快捷键 ctrl/--style typetext/cssdiv {width: 200px;height: 100px;background-color: red;}/style
/head
body
!--先使用传统的方法--
divhello, 北京/div
br/
divhello, 上海/div
br/
divhello, 天津/div
br/
divhello, 深圳/div
br/
/body
/html2.基本语法
1. CSS语法可以分为两部分: (1)选择器 (2)声明
2.声明由属性和值组成多个声明之间用分号分隔选择器
3.最后一条声明可以不加分号(建议加上)
4.一般每行只描述一个属性
5. CSS注释: /*注释内容*/ 二、CSS常用样式
1.颜色color
!DOCTYPE html
html langen
headmeta charsetUTF-8title颜色/title!-- 为了讲课方便我们就在这里写css样式 --style typetext/css/*说明:颜色可以写颜色名 比如 green也可以写 rgb 值 比如 rgb(200,200,200)和十六进制表示值 比如 #708090color: rgb(255, 222, 1); //color: #ff7d44; //color: red;*/div {/*有三种方式指定颜色1. 英文 //color: red2. 16进制 #ff7d44 [使用最多] //color: #ff7d44;3. 三原色 rgb(1,1,1) //color: rgb(255, 222, 1);*/color: rgb(255, 222, 1);}/style
/head
body
div韩顺平教育/div
/body
/html2.边框border widht height
!DOCTYPE html
html langen
headmeta charsetUTF-8title边框/titlestyle typetext/cssdiv {/*width: 300px; 具体的像素*/width: 50%; /*百分比*/height: 100px;border: 1px dashed blue;}/style/head
body
div韩顺平教育/div
/body
/html3.背景颜色background-color
!DOCTYPE html
html langen
headmeta charsetUTF-8title背景/titlestylediv {width: 200px;height: 100px;background-color: #ff7d44;}/style
/head
body
div韩顺平教育/div
/body
/html4.字体样式font-family
!DOCTYPE html
html langen
headmeta charsetUTF-8title字体样式/titlestyle typetext/css/*说明:1. font-size: 指定大小可以按照像素大小2. font-weight : 指定是否是粗体3. font-family : 指定字体类型*/div {border: 1px solid black;width: 300px;font-size: 40px;font-weight: bold;font-family: 微软雅黑;}/style
/head
body
div韩顺平教育/div
/body
/html5.div居中 margin-left/right:auto;
!DOCTYPE html
html langen
headmeta charsetUTF-8titlediv居中显示/titlestyle typetext/css/*说明:1. font-size: 指定大小可以按照像素大小2. font-weight : 指定是否是粗体3. font-family : 指定字体类型4. margin-left margin-right 如果设置为auto, 表示左右居中*/div {border: 1px solid black;width: 300px;font-size: 40px;font-weight: bold;font-family: 华文新魏;margin-left: auto;margin-right: auto;}/style
/head
body
div韩顺平教育/div
/body
/html6.文本居中text-align:center;
!DOCTYPE html
html langen
headmeta charsetUTF-8title文本居中显示/titlestyle typetext/css/*说明:1. font-size: 指定大小可以按照像素大小2. font-weight : 指定是否是粗体3. font-family : 指定字体类型4. margin-left margin-right 如果设置为auto, 表示左右居中5. 表示文本居中*/div {border: 1px solid black;width: 300px;font-size: 40px;font-weight: bold;font-family: 华文新魏;margin-left: auto;margin-right: auto;text-align: center;}/style
/head
body
div韩顺平教育/div
/body
/html7.超链接去下划线text-decoration:none;
!DOCTYPE html
html langen
headmeta charsetUTF-8title超链接去掉下划线/title!--1. decoration 修饰--style typetext/cssa {text-decoration: none;}/style
/head
body
a hrefhttp://www.baidu.com点击到百度/a
/body
/html8.表格细线border-collapse:
!DOCTYPE html
html langen
headmeta charsetUTF-8title表格细线/titlestyle typetext/css/*设置边框 : border: 1px solid black将边框合并: border-collapse: collapse;指定宽度 width设置边框 给 td, th 指定即可 border: 1px solid black;1. table, tr, td 表示组合选择器2. 就是table 和 tr 还有 td ,都用统一的样式指定, 可以提高复用性*/table, tr, td {width: 300px;border: 1px solid black;border-collapse: collapse;}/style
/head
body
tabletrtd aligncenter colspan3星期一菜谱/td/trtrtd rowspan2素菜/tdtd青草茄子/tdtd花椒扁豆/td/trtrtd小葱豆腐/tdtd炒白菜/td/trtrtd rowspan2荤菜/tdtd油闷大虾/tdtd海参鱼翅/td/trtrtd红烧肉/tdtd烤全羊/td/tr
/table/body/html9.列表去修饰list-style:
!DOCTYPE html
html langen
headmeta charsetUTF-8title列表去修饰/titlestyle typetext/cssul {/*说明:list-style:none表示去掉默认的修饰*/list-style: none;}/style
/head
body
ulli三国演义/lili红楼梦/lili西游记/lili水浒传/li
/ul
/body
/html三、CSS的三种使用方式
方式1:在标签的style属性上设置CSS样式
!DOCTYPE html
html langen
headmeta charsetUTF-8title在标签的 style 属性上设置CSS样式/title
/head
body
div stylewidth: 300px;height: 100px;background-color: redhello, 北京/div
br/
div stylewidth: 300px;height: 100px;background-color: redhello, 上海/div
br/
div stylewidth: 300px;height: 100px;background-color: redhello, 天津/div
br/
/body
/html方式2:在head标签中使用style标签来定义需要的CSS样式
!DOCTYPE html
html langen
headmeta charsetUTF-8title在 head 标签中使用 style 标签来定义需要的 CSS 样式/titlestyle typetext/cssdiv {width: 300px;height: 100px;background-color: beige;}span {border: 1px solid red;}/style
/head
body
divhello, 北京/div
br/
divhello, 上海/div
br/
spanhello, span/span
/body
/html方式3:把CSS样式写成单独的CSS文件再通过link标签引入
!DOCTYPE html
html langen
headmeta charsetUTF-8title引入外部的css文件/title!--1. rel : relation 关联2. href 表示要引入的css文件的位置可以是web的完整路径3. typetext/css 可以有也可以不写4. 推荐使用第3种--link relstylesheet href./css/my.css /
/head
body
divhello, 北京~/div
br/
divhello, 上海/div
br/
spanhello, span/span
/body
/html四、CSS选择器
1.元素选择器作用全部
1.最常见的CSS选择器是元素选择器。换句话说文档的元系就是最基本的选择器。
2. CSS元素/标签选择器通常是某个HTML元素比如p、 h1、a等
3.比如: !DOCTYPE html
html langen
headmeta charsetUTF-8title元素选择器/title!-- 为了讲课方便我们就在这里写css样式说明元素选择器会修饰所有的对应的元素--style typetext/cssh1{color: beige;}p {color: blue;}/style
/head
body
h1韩顺平教育/h1
h1韩顺平教育2/h1
h1韩顺平教育3/h1
phello, world~/p
/body
/html2.ID选择器作用一个
1. id选择器可以为标有特定id的HTML元素指定特定的样式。
2. id选择器以#来定义。
3.比如: !DOCTYPE html
html langen
headmeta charsetUTF-8titleid 选择器/title!-- 为了讲课方便我们就在这里写css样式1. 使用id选择器需要先在要修饰元素指定id属性, id值是程序员自己指定2. id是唯一的不能重复3. 在style 标签中指定id选择器时前面需要有 #id值--style typetext/css#hsp1 {color: gold;}#css2 {color: green;}/style
/head
body
h1 idhsp1韩顺平教育/h1
p idcss2hello, world~/p
/body
/html3.class选择器作用部分
1. class类选择器可以通过class属性选择去使用这个样式
2.基本语法 三个里面用两个 !DOCTYPE html
html langen
headmeta charsetUTF-8title类选择器/title!-- 为了讲课方便我们就在这里写css样式1. 使用class选择器需要在被修饰的元素上设置class属性,属性值程序员指定2. class属性的值可以重复3. 需要在 style/style 指定类选择器的具体样式, 前面需要是 .类选择器名称--style typetext/css.css1 {color: red;}.css2 {color: sandybrown;}/style
/head
body
div classcss1韩顺平教育/div
div classcss1韩顺平教育8/div
p classcss2hello, world~/p
/body
/html4.组合选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!-- 为了讲课方便我们就在这里写css样式 --style typetext/css/*组合选择器的基本语法:选择器 1选择器 2选择器 n{ 属性值; }*/.class01,#id01 {width: 300px;height: 100px;border: 2px solid red;}/style
/head
body
div classclass01韩顺平教育/div
p idid01hello, world~/p
/body/html5.优先级说明
优先级 行内样式 id选择器 class选择器 元素选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8title选择器的优先级说明/title!--1. 优先级 行内样式 id选择器 class选择器 元素选择器--style typetext/css.cls1 {color: green;}div {color: brown;}#id1 {color: yellow;}p {width: 400px;height: 100px;border: solid red;/*border-width 按照 上右下左 顺时针方向指定*/border-width: 20px 2px 8px 8px;}/style
/head
body
h1选择器的优先级说明/h1
div stylecolor: red idid1 classcls1韩顺平教育/div
pp段落/p
/body
/html五、课堂练习
CSS 测验 /*border-width 按照 上右下左 顺时针方向指定*/
