CSS

您所在的位置：网站首页 › 头歌educoder数据结构答案 › CSS

CSS

2023-11-19 03:32| 来源: 网络整理| 查看: 265

CSS——基础知识

第1关: 初识CSS：丰富多彩的网页样式

第2关: CSS样式引入方式

CSS——基础选择器

第1关: CSS 元素选择器

第2关: CSS 类选择器

第3关: CSS id选择器

CSS——文本与字体样式

第1关: 字体颜色、类型与大小

第2关: 字体粗细与风格

第3关: 文本装饰与文本布局

CSS——背景样式

第1关: 背景颜色

第2关: 背景图片

第3关: 背景定位与背景关联

CSS——表格样式

第1关: 表格边框

第2关: 表格颜色、文字与大小

CSS从入门到精通——基础知识第1关: 初识CSS：丰富多彩的网页样式 Hello World body { text-align: center; } h1 { /* ********** BEGIN ********** */ text-align: center; font-size: 40px; color: #62A8CB; /* ********** END ********** */ } img { height: 250px; } p { /* ********** BEGIN ********** */ color: grey; font-size: 18px; /* ********** END ********** */ } CSS让网页样式更丰富

使用CSS(Cascading Style Sheets)，可以使网页样式更加的丰富多彩，它解决内容与表现分离的问题，提高了工作效率。

第2关: CSS样式引入方式 style.css ```CSS body { font-family: 'Times New Roman', Times, serif; } div { border: 1px solid #000; overflow: hidden; padding: 0 1em .25em; } h1 { color: green; } p { /* ********** BEGIN ********** */ font-weight: bold; /* ********** END ********** */ } ``` index.html ```html O Captain! My Captain! h1 { color:darkblue; } img { float: left; margin-right: 1em; } O Captain! My Captain! Blue Flax (Linum lewisii)

O Captain! my Captain! our fearful trip is done, The ship has weather’d every rack, the prize we sought is won, The port is near, the bells I hear, the people all exulting, While follow eyes the steady keel, the vessel grim and daring;

CSS从入门到精通——基础选择器第1关: CSS 元素选择器类选择器 /* ********** BEGIN ********** */ /* 元素选择器 */ html { background-color: #F0F0F0; } header { padding: 40px; background-color: white; } footer { margin-top: 20px; font-size: 0.6em; color: grey; } /* ********** END ********** */ 精选时事财政思想生活精选精选新闻1 精选新闻2 精选新闻3 时事时事新闻1 时事新闻2 时事新闻3 财政财政新闻1 财政新闻2 财政新闻3 思想思想新闻1 思想新闻2 思想新闻3 生活生活新闻1 生活新闻2 生活新闻3 Copyright (c) News Copyright Holder All Rights Reserved. 第2关: CSS 类选择器类选择器 /* 元素选择器 */ html { background-color: #F0F0F0; } header { padding: 40px; background-color: white; } footer { margin-top: 20px; font-size: 0.6em; color: grey; } /* 类选择器 */ .main { margin: 10px; } /* ********** BEGIN ********** */ .newsSection{ margin-top: 20px; padding: 20px; background-color: white; } /* ********** END ********** */ 精选时事财政思想生活精选精选新闻1 精选新闻2 精选新闻3 时事时事新闻1 时事新闻2 时事新闻3 财政财政新闻1 财政新闻2 财政新闻3 思想思想新闻1 思想新闻2 思想新闻3 生活生活新闻1 生活新闻2 生活新闻3 Copyright (c) News Copyright Holder All Rights Reserved. 第3关: CSS id选择器类选择器 /* 元素选择器 */ html { background-color: #F0F0F0; } header { padding: 40px; background-color: white; } footer { margin-top: 20px; font-size: 0.6em; color: grey; } /* 类选择器 */ .main { margin: 10px; } .newsSection { margin-top: 20px; padding: 20px; background-color: white; } /* ********** BEIGN ********** */ /*选择menu元素下的li子元素*/ #menu li { float: left; width: 70px; font-size: 1.2em; font-weight: lighter; } #menu li, li a { list-style: none; text-decoration: none; } #chosen { color: red; } #news { color:blue; } #finance { color:olive; } #think { color:green; } #life { color:orange; } /* ********** END ********** */ 精选时事财政思想生活精选精选新闻1 精选新闻2 精选新闻3 时事时事新闻1 时事新闻2 时事新闻3 财政财政新闻1 财政新闻2 财政新闻3 思想思想新闻1 思想新闻2 思想新闻3 生活生活新闻1 生活新闻2 生活新闻3 Copyright (c) News Copyright Holder All Rights Reserved. CSS从入门到精通——文本与字体样式第1关: 字体颜色、类型与大小 body { /*背景渐变*/ background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, #7ECABA, #E2FCCB); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, #7ECABA, #E2FCCB); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, #7ECABA, #E2FCCB); /* 标准的语法 */ font: 100% PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; /*居中页面*/ width: 45em; margin: 0 auto; } h1, h2 { /* ********** BEGIN ***********/ font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; /* ********** END ***********/ } h1 { /* ********** BEGIN ***********/ font-size: 2.1875em; /* 35px/16px */ /* ********** END ************/ } h2 { background-color: #eaebef; /* ********** BEGIN ***********/ color: #7d717c; /* 使用em的方式设置h2元素为 28px 的字体大小 */ font-size: 1.75em; /*28px/16px */ /* ********** END ************/ } h3 { background-color: white; /* ********** BEGIN ***********/ font-size: 1.25em; color: green; /* ********** END ************/ padding-left: 10px; } hr { height: 1px; border: none; border-top: 2px dashed #88b2d2; } footer { margin: 10px auto; } /* CONTENT ----------------------------------- */ .architect { background-color: #fff; padding: 1.5em 1.75em; } /* :::: Intro ::::: */ .intro { background-color: #888888; /* ********** BEGIN ***********/ color: #fefefe; /* ********** END ************/ padding: 1px 1.875em .7em; } .intro .subhead { /* ********** BEGIN ***********/ font-size: 1.125em; /* ********** END ************/ } .intro p { font-size: 1.0625em; } /* :::: chapter Descriptions ::::: */ .chapter p { font-size: .9375em; } img { border-radius: 8px; } /* :::: Links :::: */ a:link { color: #e10000; } a:visited { color: #b44f4f; } a:hover { color: #f00; } .intro a { color: #fdb09d; } .intro a:hover { color: #fec4b6; } 第2关: 字体粗细与风格 body { /*背景渐变*/ background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, #7ECABA, #E2FCCB); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, #7ECABA, #E2FCCB); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, #7ECABA, #E2FCCB); /* 标准的语法 */ font: 100% PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; /*居中页面*/ width: 45em; margin: 0 auto; } h1, h2 { /* 设置h1, h2 的font-family*/ font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; /* ********** BEGIN ***********/ font-weight: normal; /* ********** END ***********/ } h1 { /* 设置h1元素为 35px 的字体大小 */ font-size: 2.1875em; /* 35px/16px */ } h2 { background-color: #eaebef; /* 设置h2元素的字体颜色为：#7d717c */ color: #7d717c; /* 使用em的方式设置h2元素为 28px 的字体大小 */ font-size: 1.75em; /*28px/16px */ } h3 { background-color: white; /* 使用em的方式设置h3元素为 20px 的字体大小 */ font-size: 1.25em; /* 设置h3元素的字体颜色为：green */ color: green; padding-left: 10px; } hr { height: 1px; border: none; border-top: 2px dashed #88b2d2; } /* 子选择器 */ em, a:link, .intro .subhead { font-weight: bold; } footer { /* ********** BEGIN ***********/ font-weight: light; font-style: italic; /* ********** END ***********/ margin: 10px auto; } footer a { font-style: normal; } /* CONTENT ----------------------------------- */ .architect { background-color: #fff; padding: 1.5em 1.75em; } /* :::: Intro ::::: */ .intro { background-color: #888888; /* 设置 .intro 类元素的字体颜色为 #fefefe */ color: #fefefe; padding: 1px 1.875em .7em; } .intro .subhead { /* 使用em的方式设置 `.intro .subhead ` （intro类下得subhead子类）为 18px 的字体大小。 */ font-size: 1.125em; } .intro p { font-size: 1.0625em; } /* :::: chapter Descriptions ::::: */ .chapter p { font-size: .9375em; } img { border-radius: 8px; } /* :::: Links :::: */ a:link { /* 设置 a:link 元素的字体颜色为 #b44f4f */ color: #e10000; } a:visited { color: #b44f4f; } a:hover { color: #f00; } .intro a { color: #fdb09d; } .intro a:hover { color: #fec4b6; } 第3关: 文本装饰与文本布局 body { /*背景渐变*/ background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, #7ECABA, #E2FCCB); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, #7ECABA, #E2FCCB); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, #7ECABA, #E2FCCB); /* 标准的语法 */ font: 100% PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; /*居中页面*/ width: 45em; margin: 0 auto; } h1, h2 { font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; font-weight: normal; /*********** BEGIN ***********/ text-align: center; /************ END ************/ } h1 { /* 设置h1元素为 35px 的字体大小 */ font-size: 2.1875em; /* 35px/16px */ } h2 { background-color: #eaebef; /* 设置h2元素的字体颜色为：#7d717c */ color: #7d717c; /* 使用em的方式设置h2元素为 28px 的字体大小 */ font-size: 1.75em; /*28px/16px */ } h3 { background-color: white; /* 使用em的方式设置h3元素为 20px 的字体大小 */ font-size: 1.25em; /* 设置h3元素的字体颜色为：green */ color: green; padding-left: 10px; /*********** BEGIN ***********/ text-align: left; /************ END ************/ } p { /*********** BEGIN ***********/ text-align: justify; /************ END ************/ } hr { height: 1px; border: none; border-top: 2px dashed #88b2d2; } /* 子选择器 */ em, a:link, .intro .subhead { font-weight: bold; } footer { font-weight: light; font-style: italic; /* ********** BEGIN ***********/ text-align: center; /* ********** END ***********/ margin: 10px auto; } footer a { font-style: normal; } /* CONTENT ----------------------------------- */ .architect { background-color: #fff; padding: 1.5em 1.75em; } /* :::: Intro ::::: */ .intro { background-color: #888888; /* 设置 .intro 类元素的字体颜色为 #fefefe */ color: #fefefe; padding: 1px 1.875em .7em; } .intro .subhead { /* 使用em的方式设置 `.intro .subhead ` （intro类下得subhead子类）为 18px 的字体大小。 */ font-size: 1.125em; text-align: center; } .intro p { font-size: 1.0625em; } /* :::: chapter Descriptions ::::: */ .chapter p { font-size: .9375em; } .photos { /*********** BEGIN ***********/ text-align: center; /*********** END *************/ } img { border-radius: 8px; } /* :::: Links :::: */ /* 默认显示样式 */ a:link { color: #e10000; /*********** BEGIN ***********/ text-decoration: none; /*********** END *************/ } a:visited { color: #b44f4f; } /* 鼠标放在上面的显示样式 */ a:hover { color: #f00; /*********** BEGIN ***********/ text-decoration: underline; /*********** END *************/ } .intro a { color: #fdb09d; } .intro a:hover { color: #fec4b6; } CSS从入门到精通——背景样式第1关: 背景颜色 /* ********** BEGIN ********** */ body { background-color: ivory; } /* ********** END ********** */ h1 { font-size: 40px; text-align: center; } p { font-size: 18px; color:grey; /* ********** BEGIN ********** */ background-color: lightblue; /* ********** END ********** */ } 第2关: 背景图片 body { /* ********** BEGIN ********** */ /*设置背景图片*/ background-image: url("https://www.educoder.net/attachments/download/211106") /*设置背景图片模式*/ /* ********** END ********** */ } div { width: 90%; height: 100%; margin: auto; } 第3关: 背景定位与背景关联 body { margin-right: 200px; /* ********** BEGIN ********** */ /*设置背景图片*/ background: url("https://www.educoder.net/attachments/download/211104") no-repeat fixed right top; /* ********** END ********** */ } div { width: 90%; height: 100%; margin: auto; } CSS入门到精通——表格样式第1关: 表格边框 table { /* ********** BEGIN ********** */ border-collapse: collapse; border: 2px solid black; /* ********** END ********** */ } th, td { padding: .5em .75em; } th { /* ********** BEGIN ********** */ border: 1px solid grey; /* ********** END ********** */ } td { /* ********** BEGIN ********** */ border: 1px dotted grey ; /* ********** END ********** */ } 第2关: 表格颜色、文字与大小 table { border-collapse: collapse; border: 2px solid black; } caption { /* ********** BEGIN ********** */ font-weight: bold; font-size: 20px; height: 40px; /* ********** END ********** */ } th, td { /* ********** BEGIN ********** */ width: 100px; height: 50px; text-align: center; /* ********** END ********** */ } th { /* ********** BEGIN ********** */ border: 1px solid white; background: lightseagreen; color: white; /* ********** END ********** */ } td { border: 1px solid grey; }

【本文地址】

CSS

CSS

今日新闻

推荐新闻