网站首页布局设计原理,淘宝网站建设违规吗,北京网站建设公司网站优化资讯,wordpress 修改头像P29 - P43
从此开始进入 CSS 的学习。前面都是 HTML 的学习。
CSS 的作用#xff1a;美化。
HTML 只是规定了网页内容有哪些#xff0c;在网页中显示的位置默认是从上到下显示#xff0c;还带有默认效果#xff0c;比如超链接有颜色有下划线#xff0c;无序列表有小圆点…P29 - P43
从此开始进入 CSS 的学习。前面都是 HTML 的学习。
CSS 的作用美化。
HTML 只是规定了网页内容有哪些在网页中显示的位置默认是从上到下显示还带有默认效果比如超链接有颜色有下划线无序列表有小圆点。想要把这些内容变得更加漂亮就需要 CSS。所以在制作网页时既需要 HTML 又需要 CSS。
Day 3 主要学习基础选择器和文字控制属性。
基础选择器的作用就是找标签想要美化内容就要先找到这个内容再去美化就用选择器去找这个内容。
选择器是很多的今天先从基础选择器开始学习。
文字控制属性是用来控制文字的外观比如文字的颜色、大小等等。 CSS 初体验
用 CSS 美化内容其实就是给内容加样式而已。
CSS 有多种写法比较容易上手的一种写法是直接将 CSS 放到 HTML 中放到 head 标签里面title 标签下面。
CSS 代码是给浏览器看的浏览器解释翻译完了在网页上呈现给用户看。
既然是给浏览器看的那么就要放到 head 标签里面习惯上放到 title 标签下面。
现在要将 CSS 放到 HTML 内部而 CSS 和 HTML 是两种语言要想让 CSS 打入 HTML 内部就需要在 HTML 的 head 标签内部title 标签下部添加 style 标签在 style 标签内部去写 CSS 既可。
CSS 代码都是由选择器加大括号组成。选择器的作用是找目标标签要美化谁就用选择器去找谁既可。
CSS 属性的写法是
属性名:属性值;程序示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title01-初始css/titlestyle/* 这里是CSS注释了而不是HTML注释 *//* CSS 代码 *//* 选择器 {CSS 属性} *//* 属性名和属性值成对出现 → 键值对 */p {/* 文字颜色 */color: red;/* 文字大小即字号 */font-size: 30px;}/style
/head
bodyp初识 CSS/p
/body
/html效果 CSS 引入方式 CSS 有三个常见的书写位置。
rel: relationship
href: hipertext reference
实际工作中一般都是用外部样式表。
程序示例
HTML 代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title02-CSS引入方式/titlelink relstylesheet href./my.css
/head
bodyp这是 p 标签/p!-- 行内写法 style CSS 属性 --div stylecolor: green; font-size: 30px;这是 div 标签/div
/body
/htmlCSS 代码
/* 这个文件放 CSS 代码 */
/* 选择器 { CSS 属性} */
p {color: red;
}效果 选择器 标签选择器 程序示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title03-标签选择器/titlestyle/* 特点选中同名标签设置相同的样式说明无法差异化同名标签的样式 */p {color: blue;}/style
/head
bodyp这是 p 标签。/pp111111/pp222222/p
/body
/html效果 类选择器 程序示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title04-类选择器/titlestyle.red{color: red;}.size{font-size: 50px;}/style
/head
bodyp11111/p!-- 一个类选择器可以给多个标签使用 --p classred22222/p!-- 一个标签可以使用多个类名class 属性值写多个类名类名用空格隔开 --div classred size3333333/div
/body
/html效果 id 选择器 程序示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title05-id选择器/titlestyle#red {color: red;}/style
/head
bodydiv idred这是 div 标签。/div
/body
/html效果 通配符选择器 程序示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title06-通配符选择器/titlestyle*{color: red;}/style
/head
bodyp这是 p 标签。/pdiv这是 div 标签。/divh1这是 h1 标签。/h1
/body
/html效果 小练习 代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title07-画盒子/titlestyle.div1 {width: 100px;height: 100px;background-color: brown;}.div2 {width: 200px;height: 200px;background-color: orange;}/style
/head
bodydiv classdiv1div1/divdiv classdiv2div2/div
/body
/html效果 文字控制属性
文字控制属性的作用是美化文字。 字体大小 程序示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title08-字体大小/titlestyle/* 谷歌浏览器文字默认大小是16px */p {/* font-size 属性必须要有单位否则属性不生效 */font-size: 30px;}/style
/head
bodyp测试字体大小。/pdiv测试默认字体大小。/div
/body
/html效果 调出浏览器的调试工具的方法在网页任意位置右键 出现的这个面板叫做浏览器的调试工具 点击左上角的这个小箭头使其处于高亮状态 将鼠标放置在想要查看格式的位置不要点击只需要将鼠标放在这个位置既可。 可以看出文字大小确实是 16px。
字体粗细 程序示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title09-字体粗细/titlestyleh3 {font-weight: 400;}div {font-weight: 700;}/style
/head
bodyh3h3 标题/h3divdiv 标签/div
/body
/html效果 字体倾斜 程序示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title10-字体倾斜/titlestyleem{font-style: normal;}div {font-style: italic;}/style
/head
bodyemem 标签。/emdivdiv 标签。/div
/body
/html效果 行高 程序示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title11-行高/titlestylep {/* line-height: 30px; */line-height: 2;}/style
/head
bodyp一百五十名警察和侦探包围了他那位于顶层的藏身之处这些警察在房顶上凿孔他们试图用催泪瓦斯把克劳利——这位杀害警察的人——熏出来。接着警察把机关枪架设在周围的建筑物上在超过一小时的时间内这一处纽约市的高档住宅区之一回响起啪啪的手枪声和嗒嗒嗒的机枪声。克劳利蜷缩在一个沙发后面不停地向警察射击当时有上万激动的群众围观这一战斗场面。以前在纽约市的街道上从来没有上演过这样的一幕。/p
/body
/html效果 行高按照定义是一行文字的高度加上该行文字的上间距和该行文字的下间距每一行文字的上间距都是相同的每一行文字的下间距都是相同的所以行高也等于一行文字的高度加上该行文字的下间距再加上该行文字的下一行文字的上间距也就是一行文字的顶部到下一行文字的顶部当然也等于一行文字的底部到下一行文字的底部。
行高 - 垂直居中 程序示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title12-行高-垂直居中/titlestylediv {height: 100px;background-color: skyblue;/* 注意只能是单行文字垂直居中 *//* 如果是多行文字只需要加行高拉开两行文字之间的距离既可 */line-height: 100px;}/style
/head
bodydiv文字/div
/body
/html效果 字体 无衬线字体sans-serif 程序示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title13-字体族/titlestylediv {font-family: 楷体;}/style
/head
bodydiv字体族/div
/body
/html效果 font 复合属性 程序示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title14-font属性/titlestyle/* 文字倾斜、文字加粗、字体大小是 30px行高 2 倍楷体 */div {font: italic 700 30px/2 楷体;}/style
/head
bodydiv测试 font 属性/div
/body
/html效果 文本缩进 程序示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title15-文本缩进/titlestylep {text-indent: 2em;font-size: 20px;}/style
/head
bodyp推开丁仪那套崭新的三居室的房门汪淼闻到了一股酒味看到丁仪躺在沙发上电视开着他的双眼却望着天花板。汪淼四下打量了一下看到房间还没怎么装修也没什么家具和陈设宽大的客厅显得很空最显眼的是客厅一角摆放的一张台球桌。汪淼在浏览器的地址栏中输入那个很容易记住的游戏网址www.threebody.com网页上显示该游戏只支持V装具方式。汪淼想起了纳米中心的职工娱乐室里好像有一套V装具就走出已经空荡荡的中心实验大厅去值班室要了钥匙在娱乐室中穿过一排台球桌和健身器材在一台电脑旁找到了V装具费了很大劲才把感应服穿上然后戴上显示头盔启动电脑。荒原依旧但V装具感应服中的压缩机咝咝地启动了汪淼感到一股逼人的寒气。前方出现了两个行走的人影在曙光的背景前呈黑色的剪影。汪淼追了上去他看到两人都是男性披着破烂的长袍外面还裹着一张肮脏的兽皮都带着一把青铜时代那种又宽又短的剑其中一人背着一只有他一半高的细长的木箱子。那人扭头看看汪淼他的脸像那兽皮一样脏和皱双眼却很有神眸子映着曙光。“冷啊。”他说。/p
/body
/html效果 文本对齐方式 text-align 这个属性调整的是内容的对齐方式不影响标签的位置。即改变的文字内容的位置而不是改变了标签的位置。
程序示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title16-文本对齐方式/titlestyleh1 {text-align: center;}/style
/head
bodyh1标题文字/h1
/body
/html效果 图片对齐方式 程序示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title17-图片对齐方式/titlestylediv {text-align: center;}/style
/head
bodydivimg src./images/1.jpg alt/div
/body
/html效果 文本修饰线 程序示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title18-文本修饰线/titlestylea {text-decoration: none;}div {text-decoration: underline;}p {text-decoration: line-through;}span {text-decoration: overline;}/style
/head
bodya href#a 标签去掉下划线/adivdiv 标签添加下划线/divpp 标签添加删除线/pspanspan 标签添加顶划线/span
/body
/html效果 color 文字颜色 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title19-文字颜色/titlestyleh1{color: red;}h2{color: rgb(0, 255, 0);}h3{/* 0 表示完全透明1 表示完全不透明 */color: rgba(0, 255, 0, 0.5);}h4 {/* 6 位可以简写为 3 位相同的两位可以只写一个 */color: #0000ff;/* 相当于 00f */}/style
/head
bodyh1h1 标签/h1h2h2 标签/h2h3h3 标签/h3h4h4 标签/h4
/body
/html效果 调试工具 - 谷歌浏览器 程序示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title20-调试工具/titlestylediv {color: red;font-size: 40; /* 没有单位 px是不起作用的 */}/style
/head
bodydiv调试文字/div
/body
/html效果 上面部分是 HTML 代码下面部分是作用在这部分 HTML 代码上的 CSS 代码。
将代码修改正确后刷新网页。 综合案例一新闻详情 代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title21-综合案例 —— 新闻详情/titlestyleh1{text-align: center;font-weight: 400;font-size: 30px;color: #333;}div {text-align: center;}.color{color: #999;}.color2 {color: #333;}.indent {text-indent: 2em;}.size1{font-size: 14px}.size2{font-size: 18px}div {color: #999;font-size: 14px}.pic {text-align: center;}/style
/head
bodyh1在希望的田野上 | 湖北秋收开镰 各地多举措保增产增收/h1p classcolor size1来源央视网 | 2222年12月12日 12:12:12/p!-- div来源央视网 | 2222年12月12日 12:12:12/div --p classindent size2 color2strong央视网消息/strong眼下湖北省秋收开镰已有一周多的时间。水稻收割已经超过四成玉米收割七成。湖北省通过大力推广新品种水稻建设高标准农田等一系列措施为秋粮稳产提供有力支撑。/pp classindent size2 color2中稻占据了湖北全年粮食产量的一半以上。在湖北的主产区荆门市370万亩中稻已经收割四成以上。/pdiv classpicimg src./1.jpg alt/divp classindent size2 color2王化林说的新品种是湖北省研发的杂交水稻“华夏香丝”不仅产量高还具有抗病、抗倒、抗高温的特性。在荆门漳河镇的一工程示范田内像“华夏香丝”这样抗旱节水的品种还有20多个这些水稻新品将在荆门全面推广确保来年增产增收。/pp classindent size2 color2此外湖北还大力推进高标准农田建设。截至今年6月已建成3980万亩高标准农田。目前湖北全省仍有1800多万亩中稻正在有序收割中预计10月中旬收割完毕。/p
/body
/html综合案例二CSS 简介 代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title22-综合案例二CSS 简介/titlestyleh1 {color: #333;}p {color: #444;text-indent: 2em;font-size: 14px;line-height: 30px;}a {color: #0069c2;}li {color: #444;font-size: 14px;line-height: 30px;}/style
/head
bodyh1CSS层叠样式表/h1p层叠样式表Cascading Style Sheets缩写为 CSS是一种 a href#样式表/a 语言用来描述 HTML 或 XML包括如 SVG、MathML、XHTML 之类的 XML 分支语言文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。/ppstrongCSS 是开放网络的核心语言之一/strong由 W3C 规范 实现跨浏览器的标准化。CSS 节省了大量的工作。 样式可以通过定义保存在外部.css 文件中同时控制多个网页的布局这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级CSS1 现已废弃 CSS2.1 是推荐标准 CSS3 分成多个小模块且正在标准化中。/pulliCSS 介绍 如果你是 Web 开发的新手请务必阅读我们的 CSS 基础 文章以学习 CSS 的含义和用法。/liliCSS 教程 我们的 CSS 学习区 包含了丰富的教程它们覆盖了全部基础知识能使你在 CSS 之路上从初出茅庐到游刃有余。/liliCSS 参考 针对资深 Web 开发者的 a href#详细参考手册/a 描述了 CSS 的各个属性与概念。/li/ul
/body
/html
