专业网站建设全包,上海的网站开发公司电话,wordpress 引号转义,活动营销方案CSS笔记02
美化网页元素
为什么要美化网页
目的#xff1a; 有效的传递页面信息美化网页、页面漂亮、才能吸引用户突显页面的主题提高用户的体验
span标签 span标签是短语内容的通用行内容器#xff0c;它本身并没有任何特殊语义。 通常我们使用span标签来把我们想要重…CSS笔记02
美化网页元素
为什么要美化网页
目的 有效的传递页面信息美化网页、页面漂亮、才能吸引用户突显页面的主题提高用户的体验
span标签 span标签是短语内容的通用行内容器它本身并没有任何特殊语义。 通常我们使用span标签来把我们想要重点要突出的行内内容套起来再通过使用类或者Id等选择器给其添加我们想要实现的某些样式。 span标签与div标签很相似但 div是一个块元素而span 则是一个行内元素 。 示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/headstyle/* id选择器 */#test {font-size: 50px;}
/stylebody!-- span标签的使用 --
欢迎学习span idtestJava/span/body
/html查看网页效果 字体样式
常用的修饰字体样式的 CSS 属性 字体font-family字体大小font-size字体粗细font-weight 下面我们通过写代码的方式来学习如何美化字体样式
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head!-- 字体样式
font-family: 字体(中英文的字体都可以定义还能定义字体风格)
font-size: 字体大小
font-weight: 字体粗细
color: 字体颜色
--
stylebody {font-family: Arial Black, 楷体, serif;color: chocolate;}h1 {font-size: 50px;}.p1 {font-weight: bold;}
/stylebodyh1作品简介/h1p classp1《肖申克的救赎》是美国作家斯蒂芬·埃德温·金的中篇小说也是其代表作。收录于小说合集《四季奇谭》中副标题为“春天的希望”。
/pp该作讲述银行家安迪被当作杀害妻子的凶手送上法庭。妻子的不忠、律师的奸诈、法官的误判、狱警的凶暴、典狱长的贪心与卑鄙将正处在而立之年的安迪一下子从人生的巅峰推向了人间地狱。安迪在狱中在忍受了多年的磨难之后终于在一个雷电交加的夜晚越狱而出重获自由。当翌日典狱长打开安迪的牢门时发现他已不翼而飞预感到末日来临的典狱长在检察人员收到安迪投寄的罪证之前畏罪自杀。
/pp监狱作为故事背景带有寓意性以安迪、典狱长、狱警和囚犯们所构成的这个世界本身就是错谬、混乱的。安迪是一个无罪的好人却被关进监狱接受改造。肖申克的几任典狱长没有一个是清白的但他们却在那里颐指气使教化训导着无罪的安迪。在这样一个错谬、黑白颠倒的世界现代派作家笔下的人物通常会自甘堕落或精神崩溃而斯蒂芬·金塑造的安迪却像一只浴火后重生的火凤凰健康自信地飞出了炼狱的火坑。这样的结果同样寄托着作者要使荒原上的人们坚守善良人性并“振奋”起来的创作主旨。
/ph1英文诗歌/h1pI offer you lean streets, desperate sunsets, the moon of the jagged suburbs.
/ppI offer you the bitterness of a man who has looked long and long at the lonely moon.
/ppI offer you my ancestors, my dead men, the ghosts that living men have honoured in marble: my fathers father killed in the frontier of Buenos Aires, two bullets through his lungs, bearded and dead, wrapped by his soldiers in the hide of a cow;
/ppmy mothers grandfather -just twenty four- heading a charge of three hundred men in Perú, now ghosts on vanished horses. I offer you whatever insight my books may hold. whatever manliness or humour my life.
/p/body
/html查看网页效果 补充 font - 可以用来作为以上 CSS 属性的简写 在实际的网页设计开发中我们通常不会像上面的代码中那样将字体样式写得那么分散我们通常直接使用font一次定义多个字体样式的属性如下面代码所示
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylep {font: oblique bold 20px 楷体; /* 风格 粗细 大小 字体 */}/style/head
bodyp《肖申克的救赎》是美国作家斯蒂芬·埃德温·金的中篇小说也是其代表作。收录于小说合集《四季奇谭》中副标题为“春天的希望”。
/pp该作讲述银行家安迪被当作杀害妻子的凶手送上法庭。妻子的不忠、律师的奸诈、法官的误判、狱警的凶暴、典狱长的贪心与卑鄙将正处在而立之年的安迪一下子从人生的巅峰推向了人间地狱。安迪在狱中在忍受了多年的磨难之后终于在一个雷电交加的夜晚越狱而出重获自由。当翌日典狱长打开安迪的牢门时发现他已不翼而飞预感到末日来临的典狱长在检察人员收到安迪投寄的罪证之前畏罪自杀。
/pp监狱作为故事背景带有寓意性以安迪、典狱长、狱警和囚犯们所构成的这个世界本身就是错谬、混乱的。安迪是一个无罪的好人却被关进监狱接受改造。肖申克的几任典狱长没有一个是清白的但他们却在那里颐指气使教化训导着无罪的安迪。在这样一个错谬、黑白颠倒的世界现代派作家笔下的人物通常会自甘堕落或精神崩溃而斯蒂芬·金塑造的安迪却像一只浴火后重生的火凤凰健康自信地飞出了炼狱的火坑。这样的结果同样寄托着作者要使荒原上的人们坚守善良人性并“振奋”起来的创作主旨。
/p/body
/html查看网页效果 文本样式 常用的修饰文本样式的 CSS 属性 文本颜色color文本对齐方式text-align段落首行缩进text-indent文本装饰性线条text-decoration 下面我们通过写代码的方式来学习如何美化文本样式
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!--颜色 - color:1.直接用 单词 表示颜色例如 color: blue;2.使用 #号 十六进制符号(0 ~ F) 或者 rgb()函数 来表示RGB颜色例如 color: #0000FF; / color: rgb(0,0,255)3.补充: 还可以使用rgba()函数来给我们的文本颜色加上透明度对齐方式 - text-align:center/left/right -- 居中/居左/居右段落首行缩进 - text-indent:em 与 px -- 1em表示一个字符的宽度而1px表示一个像素格的宽度行高 - line-height:当 行高 与 块 的高度相同时就可以实现上下居中装饰性线条 - text-decoration:underline/line-through/overline/none -- 下划线/中划线/上划线/去除装饰性线条--styleh1 {color: rgba(0,0,255,50%);text-align: center;}.p1 {text-indent: 2em;}.p3 {background: skyblue;height: 150px;line-height: 150px;}.li1 {text-decoration: underline;}.li2 {text-decoration: line-through;}.li3 {text-decoration: overline;}a {text-decoration: none;}/style/head
body!-- a标签默认样式是有下划线的 --
a hrefabc123456/ap classli1abc123456/p
p classli2abc123456/p
p classli3abc123456/ph1作品简介/h1p classp1《肖申克的救赎》是美国作家斯蒂芬·埃德温·金的中篇小说也是其代表作。收录于小说合集《四季奇谭》中副标题为“春天的希望”。
/pp该作讲述银行家安迪被当作杀害妻子的凶手送上法庭。妻子的不忠、律师的奸诈、法官的误判、狱警的凶暴、典狱长的贪心与卑鄙将正处在而立之年的安迪一下子从人生的巅峰推向了人间地狱。安迪在狱中在忍受了多年的磨难之后终于在一个雷电交加的夜晚越狱而出重获自由。当翌日典狱长打开安迪的牢门时发现他已不翼而飞预感到末日来临的典狱长在检察人员收到安迪投寄的罪证之前畏罪自杀。
/pp classp3监狱作为故事背景带有寓意性以安迪、典狱长、狱警和囚犯们所构成的这个世界本身就是错谬、混乱的。安迪是一个无罪的好人却被关进监狱接受改造。肖申克的几任典狱长没有一个是清白的但他们却在那里颐指气使教化训导着无罪的安迪。在这样一个错谬、黑白颠倒的世界现代派作家笔下的人物通常会自甘堕落或精神崩溃而斯蒂芬·金塑造的安迪却像一只浴火后重生的火凤凰健康自信地飞出了炼狱的火坑。这样的结果同样寄托着作者要使荒原上的人们坚守善良人性并“振奋”起来的创作主旨。
/p/body
/html查看网页效果 补充垂直居中对齐行内元素文本、图片等首先我们准备一张图片
cat.jpg 然后我们让与该图片处在同一行的文字与它垂直居中对齐
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head!-- 垂直对齐行内的图片或者文字 - vertical-align: middle; --
styleimg,span {vertical-align: middle;}
/stylebodypimg srcimages/cat.png altcatspan这是一只可爱的小猫/span
/p/body
/html查看网页效果 超链接伪类 下面是一些超链接伪类 :hover - 用户将光标鼠标指针悬停在元素上时生效【常用】:active - 用户使用鼠标按下按键到松开按键之间这段时间内生效【不常用】:linK - 元素尚未被用户访问时生效【不常用不做演示】:visited - 在用户访问链接后生效【不常用不做演示】 下面我们通过写代码的方式来学习如何使用超链接伪类
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/headstylea {text-decoration: none;color: black; /* a标签中默认的文本颜色为黑色 */font-size: 17px; /* a标签中默认的文本大小为17px */}/* a标签的伪类 *//* :hover -- 鼠标悬停在a标签中的文本上时的状态 */a:hover {color: orange; /* 鼠标悬停在a标签中的文本上时字体变为橘色 */font-size: 20px; /* 鼠标悬停在a标签中的文本上时字体放大为20px */}/* :active -- 鼠标按住a标签中的文本且未释放时的状态 */a:active {color: red; /* 鼠标按住a标签中的文本且未释放时字体变为红色 */}/stylebodya href#img srcimages/book.jpg altbook
/apa href#码出高效Java开发手册/a
/ppa href#作者杨冠宝 / 高海慧/a
/pp99.0
/p/body
/html查看默认网页效果 鼠标悬停在a标签中的文本上时的网页效果 鼠标按住a标签中的文本且未释放时时的网页效果 文本的阴影效果【拓展】 为文字添加阴影text-shadow 下面我们通过写代码的方式来学习如何实现文本的阴影效果 给上一个网页中的文本99.0添加一个阴影效果
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/headstylea {text-decoration: none;color: black;font-size: 17px;}a:hover {color: orange;font-size: 20px;}a:active {color: red;}/* 文本的阴影效果 -- text-shadow: 水平偏移量 垂直偏移量 阴影模糊半径 阴影颜色 */#price {text-shadow: 3px 3px 3px red;}/stylebodya href#img srcimages/book.jpg altbook
/apa href#码出高效Java开发手册/a
/ppa href#作者杨冠宝 / 高海慧/a
/pp idprice99.0
/p/body
/html查看网页效果 以上面的网页为例关于阴影的偏移量和模糊半径的理解可以参照下图 列表样式练习
下面是一个购物网站首页侧边的列表部分的 HTML 代码
index.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
h2 classtitle全部商品分类/h2
ullia href#图书/anbsp;nbsp;a href#音像/anbsp;nbsp;a href#数字商品/a/lilia href#家用电器/anbsp;nbsp;a href#手机/anbsp;nbsp;a href#数码/a/lilia href#电脑/anbsp;nbsp;a href#办公/a/lilia href#家居/anbsp;nbsp;a href#家装/anbsp;nbsp;a href#厨具/a/lilia href#服饰鞋帽/anbsp;nbsp;a href#个性化妆/a/lilia href#礼品箱包/anbsp;nbsp;a href#钟表/anbsp;nbsp;a href#珠宝/a/lilia href#食品饮料/anbsp;nbsp;a href#保健食品/a/lilia href#彩票/anbsp;nbsp;a href#旅行/anbsp;nbsp;a href#充值/anbsp;nbsp;a href#票务/a/li
/ul
/body
/html查看默认网页效果 下面我们运用先前学习的知识来给上面的页面添加一些样式让他看起来更像一个真正的购物网站首页侧边的列表
index.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink hrefcss/style.css relstylesheet typetext/css/
/head
body!-- div标签定义网页中的一个分隔区块或者一个区域部分 --
!-- div标签常用于组合块级元素以便通过CSS来对这些元素进行格式化 --
div idnavh2 classtitle全部商品分类/h2ullia href#图书/anbsp;nbsp;a href#音像/anbsp;nbsp;a href#数字商品/a/lilia href#家用电器/anbsp;nbsp;a href#手机/anbsp;nbsp;a href#数码/a/lilia href#电脑/anbsp;nbsp;a href#办公/a/lilia href#家居/anbsp;nbsp;a href#家装/anbsp;nbsp;a href#厨具/a/lilia href#服饰鞋帽/anbsp;nbsp;a href#个性化妆/a/lilia href#礼品箱包/anbsp;nbsp;a href#钟表/anbsp;nbsp;a href#珠宝/a/lilia href#食品饮料/anbsp;nbsp;a href#保健食品/a/lilia href#彩票/anbsp;nbsp;a href#旅行/anbsp;nbsp;a href#充值/anbsp;nbsp;a href#票务/a/li/ul
/div/body
/htmlstyle.css
#nav {width: 300px;background: lightgrey;
}.title {font-size: 18px;font-weight: bold;text-indent: 1em;line-height: 35px;background: darkorange;
}/*
list-style:none - 去除列表元素的标记(比如圆点、符号、或者自定义计数器样式等)disc - 实心圆点(li标签默认)circle - 空心圆点decimal - 自定义计数器(1. 2. 3. ...)square - 实心正方形
*/
ul li {height: 30px;list-style: none; /* 去除列表前的实心圆点 */text-indent: 1em;
}a {text-decoration: none;font-size: 14px;color: black;
}a:hover {color: darkorange;text-decoration: underline;
}查看此时的网页效果 背景 背景颜色 设置背景颜色background-color 背景图片 设置背景图片background-image设置背景图片的重复方式background-repeat 补充以上三种设置背景的 CSS 属性都可以直接用background简写 示例 首先准备一张图片
dog.jpg 然后我们编写一个网页练习如何将上图设置成网页中块元素的背景图片以及如何设置我们想要的图片重复方式
index.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylediv {width: 1000px;height: 700px;border: 2px solid red;/* 背景图片默认是重复铺满整个div的 - background-repeat: repeat */background-image: url(images/dog.jpg);}.div2 {/* 设置背景图片不重复 */background-repeat: no-repeat;}.div3 {/* 设置背景图片在水平方向上重复 */background-repeat: repeat-x;}.div4 {/* 设置背景图片在垂直方向上重复 */background-repeat: repeat-y;}/style/head
bodydiv classdiv1/div
div classdiv2/div
div classdiv3/div
div classdiv4/div/body
/html查看网页效果 列表样式练习【补充】
学习了如何设置背景图片之后下面我们继续完善我们之前写的列表颜色练习中的页面给我们的列表上添加箭头图标首先准备两张透明背景的箭头的图片 然后我们补充之前列表样式练习的 CSS 代码
style.css
#nav {width: 300px;background: lightgrey;
}.title {font-size: 18px;font-weight: bold;text-indent: 1em;line-height: 35px;/* background: 背景颜色 背景图片地址 背景图片位置(x y) 背景图片重复方式 */background: darkorange url(../images/DownArrow.png) 265px 12px no-repeat;
}ul li {height: 30px;list-style: none;text-indent: 1em;/* background-image: 背景图片地址 */background-image: url(../images/RightArrow.png);/* background-repeat: 背景图片重复方式 */background-repeat: no-repeat;/* background-position: 背景图片位置(x y) */background-position: 230px 2px;
}a {text-decoration: none;font-size: 14px;color: black;
}a:hover {color: darkorange;text-decoration: underline;
}查看网页效果 渐变【拓展】
渐变效果的实现我们仅作为了解即可这里推荐一个开源网站Grabient 。此网站提供了多样且免费的 CSS 渐变效果我们可以直接复制这个网站上的 CSS 代码到我们自己的网站上以达到我们想要实现的渐变效果示例在 Grabient 上选择我们想要实现的渐变效果复制 CSS 代码 粘贴到我们自己网页的代码中
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!-- 径向渐变圆形渐变 --stylebody {/*background-color: #0093E9;*/background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);}/style/head
body/body
/html查看网页效果
