做网站如何文字链接文字,做网站到底需要什么,专门做婚纱儿童摄影网站,企业做网站需要注意什么目录
一. CSS 1. 概述 2. 基本语法 (1)行内样式表 (2)内嵌样式表 (3)外部样式表
3. 选择器
(1)标签选择器:
(2)类选择器:
(3)通配选择器:
(4)后代选择器:
4. 基础样式
(1). 文本样式
(2). 背景样式
(3). 列表样式
5. 伪类 (1)定义: (2)伪类的语法#xff1a;
…目录
一. CSS 1. 概述 2. 基本语法 (1)行内样式表 (2)内嵌样式表 (3)外部样式表
3. 选择器
(1)标签选择器:
(2)类选择器:
(3)通配选择器:
(4)后代选择器:
4. 基础样式
(1). 文本样式
(2). 背景样式
(3). 列表样式
5. 伪类 (1)定义: (2)伪类的语法
6. 透明度(opacity)
7. 块级 行级标签 (1)块标签和行标签: (2)改变标签类型(display): (3)div和span标签 一. CSS 1. 概述 CSS(Cascading Style Sheets)级联样式表是一种样式表语言可以控制HTML文档外观和布局 例如:字体、颜色、边距、高度、宽度、背景图像、高级定位等方面 .使用CSS可将页面的内容与表现形式分离HTML文档中存放页面内容而定义表现形式的CSS放在一个.css文件中或HTML文档的某一部分 ,便于管理. 2. 基本语法 (1)行内样式表 1) 定义: 通过标签的style属性来设置元素的样式,写在body里面 2) 格式: 标签名 style属性1:属性值1; 属性2:属性值2; 属性3:属性值3; 内容 /标签名 3) 举例: !DOCTYPE html
htmlheadmeta charsetutf-8 /title/title/headbody!-- 方法一:行内样式表 --p stylecolor:red;font-weight: 600;font-size: 20px;静夜思/pp stylecolor:red;font-weight: 600;font-size: 20px;床前明月光/pp stylecolor:red;font-weight: 600;font-size: 20px;静疑是地上霜/p /body
/html(2)内嵌样式表 1) 定义: 将CSS代码集中写在HTML文档的head头部标签中并且用style标签定义 2) 格式: style typetext/css p { color:red; font-family:隶书; font-size:24px;} /style 3) 举例: !DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlestyle/*方法二:内嵌样式表*/p{color:green;font-weight: 700;font-size: 20px;} /style/headbodyp举头望明月/pp低头思故乡/p/body
/html(3)外部样式表 1) 定义: 将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中 2) 举例: CSS文件:
p{color:blue;font-weight: 700;font-size: 20px;
} html文件:
!DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlelink hrefcss/index.css relstylesheet/ /headbodyp举头望明月/pp低头思故乡/pp这是一个测试样例这是一个测试样例这是一个测试样例这是一个测试样例这是一个测试样例这是一个测试样例这是一个测试样例这是一个测试样例/p/body
/html总结: 3. 选择器
(1)标签选择器: 通过标签选择器可以选择页面中的所有指定标签 语法标签名{ }
(2)类选择器: 通过标签的class属性值选中一组标签 语法: .class属性值{ }
(3)通配选择器: 可以用来选中页面中的所有的标签 语法: *{ }
!DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlestyle/*标签选择器 优先级中等*/h3{color: blue;}p{color: gray;}/*类选择器 优先级高*/.p1{color: firebrick;}.p2{color: yellowgreen;}.p1,.p2{font-size: 30px;} /* p1,p2共同的属性 *//*通配选择器 能匹配所有的,优先级低*/ *{ font-style: italic; line-height: 40px;letter-spacing: 10px;}/style/headbodyh3 静夜思/h3p classp1床前明月光/pp classp2疑是地上霜/pp举头望明月/pp低头思故乡/p/body
/html(4)后代选择器:
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle/* 后代选择器 */.u1 li{/* 对u1下的li进行修饰 */font-size: 20px;list-style-type: decimal;/* 设置列表项标志的类型 */list-style-position: outside;/* 设置列表项标志的位置 outside外面 inside里面 */}.u2 li{ list-style-position: outside;text-align: center;}/style/headbodyul classu1lia href# 首页/a/lilia href# 学校概况/a/lilia href# 招生就业/a/lilia href# 教育教学/a/li/ulul classu2lia href# 首页/a/lilia href# 学校概况/a/lilia href# 招生就业/a/lilia href# 教育教学/a/li/ul/body
/html
4. 基础样式 (1). 文本样式
● color 字体颜色
● font-size 字体大小
● font-family 字体类型
● font-weight 字体粗细● font-style: italic 斜体文本
● text-align 文本对齐
● text-decoration: line-through /underline / none 文本中间划线 / 文本底部划线 / 文本取消划线
● font-style: italic 斜体文本
● line-height 设置行高
● letter-spacing 可以指定字符间距
● text-indent 用来设置首行缩进
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle.p1.p2{font-size: 20px;/* 字体大小 */}.p1{color: green;font-weight: 700;/* 字体粗细 */font-family: 楷体;/* 字体 *//* text-decoration: line-through;/* 横线贯穿文本 *//* font-style: italic; 斜体字 */ text-decoration:underline;/* 文字底部横线 *//*line-height: 40px; 行高 *//*letter-spacing: 20px; 字间距 *//* text-indent: 20px;首行缩进像素大小 */text-indent: 2em;/* em是当前文本一个字的大小,会随着当前段落字体的大小改变而改变 */}h2{text-align: center;}a{text-decoration: none;/* 将超链接底部的横线去掉 */}/style/headbodyh2静夜思/h2p classp1列表属性可以设置,改变列表标志,或者将推向作为列表项标志列表属性可以设置,改变列表标志,或者将推向作为列表项标志列表属性可以设置,改变列表标志,或者将推向作为列表项标志列表属性可以设置,改变列表标志,或者将推向作为列表项标志列表属性可以设置,改变列表标志,或者将推向作为列表项标志列表属性可以设置,改变列表标志,或者将推向作为列表项标志列表属性可以设置,改变列表标志,或者将推向作为列表项标志/pp classp2列表属性可以设置,改变列表标志,或者将推向作为列表项标志列表属性可以设置,改变列表标志,或者将推向作为列表项标志列表属性可以设置,改变列表标志,或者将推向作为列表项标志列表属性可以设置,改变列表标志,或者将推向作为列表项标志列表属性可以设置,改变列表标志,或者将推向作为列表项标志列表属性可以设置,改变列表标志,或者将推向作为列表项标志列表属性可以设置,改变列表标志,或者将推向作为列表项标志/pa href百度/aa href百度/aa href百度/a /body
/html
(2). 背景样式
● background-color 背景颜色
● background-image 背景图片
● background-repeat 背景重复 注意 需要提前将图片导入img文件夹
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle .p1{background-color: beige;}.p2{ background-color: blue;/* 背景颜色 */background-image: url(img/2.jpg) ;/* 背景图片 */background-repeat: repeat-y;/* 向下重复: 当图片无法完全填充设定的宽和高时,会进行重复 *//* background-repeat: no-repeat;/* 背景是否重复 */ */background-size: cover;/* 背景大小覆盖整个标签区域 */width: 1800px;height: 1600px;}/style/headbodyp classp1hello/pp classp2img srcimg/1.jpg //p/body
/html (3). 列表样式
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle/* 后代选择器 */.u1 li{/* 对u1下的li进行修饰 */font-size: 20px;list-style-type: decimal;/* 设置列表项标志的类型 *//* list-style-image:url(img/2.jpg) ; /* 将图象设置为列表项标志*/ */list-style-position: outside;/* 设置列表项标志的位置 outside外面 inside里面 *//* 简写方式 值数量 位置不受限制 *//* list-style: outside url() none; */}.u2 li{/* font-size: 20px;list-style-type: none; *//* list-style-image:url(img/1.jpg) ; *//* list-style-position: inside; */list-style-position: outside;text-align: center;}/style/headbodyul classu1lia href# 首页/a/lilia href# 学校概况/a/lilia href# 招生就业/a/lilia href# 教育教学/a/li/ulul classu2lia href# 首页/a/lilia href# 学校概况/a/lilia href# 招生就业/a/lilia href# 教育教学/a/li/ul/body
/html
5. 伪类 (1)定义: 伪类用来表示标签的特殊状态, 例如 当鼠标移动或点击时,当前文本字体发生改变 (2)伪类的语法 :hover 表示鼠标移入的状态 :active表示的是被点击的状态 :focus 向拥有键盘输入焦点的标签添加样式
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle/* 默认样式 */.p1{color: aqua;}/*鼠标移动到标签时,自动切换到此样式 */.p1:hover{color: green;}a{color:blue;text-decoration: none;}a:hover{color: red;font-size: 20px;text-decoration: underline;}/*鼠标点击后切换到此样式表 */a:active{color: green;/* 与鼠标放在上面的小狗不同*/}.t1:hover{background-color: antiquewhite;color: white;}.t1:active{color: red;background-color: plum;}/* 当输入标签获得鼠标焦点时,自动切换此样式 */input:focus{background-color: aquamarine;}/style/headbody p classp1这是一个段落/pa href百度/aa href百度/aa href百度/ahr /input classt1 typebutton value保 存 /hr /input typetext /br /input typetext /br /input typetext /br //body
/html
6. 透明度(opacity) opacity: 透明度0-1之间 , 0是完全透明 1是不透明
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle/style/headbody img srcimg/1.jpg styleopacity:0.3 ; /!-- 透明度 0-1之间 0是完全透明 1是不透明 --/body
/html
7. 块级 行级标签 (1)块标签和行标签: 块标签:无论内容有多少都会占一行,可以设置宽高 例如: p h1 ol ul hr 行标签:只占内容自身大小,不能设置宽高,即使设置了,也不能生效 例如: 超链接a 加粗b (2)改变标签类型(display): block : 块标签 inline : 行标签 none : 标签整个消失 (3)div和span标签 div标签: 块级标签,没有默认样式,里面可以放任何标签,是纯净版的块级标签,用于布局网页 span标签: 行级标签,没有默认样式,主要用来选中要修饰的文本内容,用于添加其他标签样式
!DOCTYPE html
htmlheadmeta charsetutf-8title/title/headbodyh3 stylewidth: 300px; display: none;3级标签/h3baaaa/ba href stylewidth: 100px; display: block;background-color: antiquewhite; text-align: center;百度/a!-- div标签是块级标签,标签没有任何的默认样式,里面可以放任何标签,是一个纯净版的块级标签--div stylebackground-color: antiquewhite; width: 300px;aaadivbbb/divpcccc/p/div!-- span是一个行标签,没有任何默认样式 主要用来选中要修饰的文本内容,方便添加样式 --pspan stylecolor: aquamarine;腾讯/span百度百度/p/body
/html
