慕课网

精品课程初识HTML(5)+CSS(3)

初识HTML(5)+CSS(3)

最热最新

menghong

注意：!important要写在分号的前面这里注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。

查看全部

0 采集收起来源：为所欲为 - 选择器最高层级!important
2018-03-22
menghong

层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。如下面代码: p{color:red;} p{color:green;} <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p> 最后 p 中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。所以前面的css样式优先级就不难理解了：内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。

查看全部

0 采集收起
2018-03-22
肥仔汇

认识标签笔记 <style type="text/css"(注明格式)> span{} /*定义span*/ table tr td,th{border:1px solid #000;} /*为表格加上边框（用CSS格式）*/ </style> <body> /*网页上显示的内容都放在body中*/ <h1> /*用h1-h6添加标题标题格式自动定义*/ <p> /*文章段落p与p之间自动分割*/ <em> /*斜体*/ <strong> /*粗体*/ <span>此处文字被定义</span> /*span需在style中定义后使用*/ <q> /*语意：引用别人的话（默认添加双引号）*/ <blockquote> /*长文引用（默认缩入）*/ <br /><br> /*两个换行符*/ &nbsp /*空格*/ <hr /><hr> /*水平横线符号*/ <address> /*地址符（默认换行+斜体）*/ <code><pre> /*加入一行或一段代码 pre可用于预显示格式*/ <ul>or<ol> /*列表or排序列表*/ <li>信息</li> </ul>or</ol> <div id=""> /*用于分块 div+css 加入ID后逻辑更清晰*/ <table summary="简介不显示"> /*表格*/ <caption> /*表格标题*/ <tbody> /*加入后整个表格下载完才显示*/ <tr> /*表示一行*/ <th></th> /*表示表格表头（在tr内）*/ <td></td> /*一个单元格（在tr内）*/ </tr> </tbody> </table> <a href="网址" title="鼠标指向时的注释" target="_blank"(新窗口打开链接)>显示的文本</a> <a href="mailto:a@a.com?cc(bcc密件抄送)=b@b.com(";"可实现多收件人、抄送、密件抄送人)&subject=邮件主题&body=邮件内容">发送</a> <img src="图片地址" alt="下载失败时显示的文本" title="提示文字">

查看全部

0 采集收起
2018-03-22
Wardog

<img src="图片地址" alt="下载失败时的替换文本" title = "鼠标滑过时的提示文本">

查看全部

0 采集收起
2018-03-22
威cT

<style type="text/css"> table tr td,th{border:1px solid #000;} 后代选择器和并集选择器。

查看全部

0 采集收起
2018-03-22
小袜子

文字排版--斜体【例如】 a{font-style:italic;} 文字排版--粗体【例如】 span{font-weight:bold;} 文字排版--字号、颜色【例如】body{font-size:12px;color:#666} 文字排版--字体【例如】body{font-family:"宋体";} 文字排版--下划线【例如】a{text-decoration:underline;} 文字排版--删除线【例如】 .oldPrice{text-decoration:line-through;} 段落排版--缩进【例如】p{text-indent:2em;} 段落排版--行间距【例如】p{line-height:1.5em;} 段落排版--字间距、字母间距【例如】h1{letter-spacing:50px;} //用于字母与字母之间 h1{ word-spacing:50px;} //用于单词与单词之间段落排版--对齐【例如】h1{text-align:center/right/left;}

查看全部

0 采集收起来源：再加个样式 - 使用font-style设置字体样式
2018-03-22
menghong

特殊性有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?我们来看一下面的代码： p{color:red;} .first{color:green;} <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p> p和.first都匹配到了p这个标签上，那么会显示哪种颜色呢？green是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。下面是权值的规则：标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码： p{color:red;} /*权值为1*/ p span{color:green;} /*权值为1+1=2*/ .warning{color:white;} /*权值为10*/ p span.warning{color:purple;} /*权值为1+1+10=12*/ #footer .note p{color:yellow;} /*权值为100+10+1=111*/ 注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

查看全部

0 采集收起来源：权值计算-特殊性
2018-03-22
Wardog

<table summary="表格简介文本"> 摘要，为了早呢更加表格的可读性，不会再浏览器中显示

查看全部

1 采集收起
2018-03-22
威cT

记住<div>,它使文本更加有逻辑。清晰。

查看全部

0 采集收起
2018-03-22
小袜子

权值的规则：标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码： p{color:red;} /*权值为1*/ p span{color:green;} /*权值为1+1=2*/ .warning{color:white;} /*权值为10*/ p span.warning{color:purple;} /*权值为1+1+10=12*/ #footer .note p{color:yellow;} /*权值为100+10+1=111*/ 注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低

查看全部

0 采集收起来源：权值计算-特殊性
2014-11-09
威cT

分出一个独立的逻辑部分。为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为<div>提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。语法： <div id="版块名称">…</div>

查看全部

0 采集收起
2018-03-22
天際

div{ border-width:2px; border-style:solid; border-color:red; } 注意： 1、border-style（边框样式）常见样式有： dashed（虚线）| dotted（点线）| solid（实线）。 2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如: border-color:#888;//前面的井号不要忘掉。 3、border-width（边框宽度）中的宽度也可以设置为： thin | medium | thick（但不是很常用），最常还是用象素（px）。

查看全部

0 采集收起来源：画个圈圈 - 使用border为盒子添加边框（一）
2014-11-09
威cT

<ol>是有序列表。语法： <ol> <li>信息</li> <li>信息</li> ...... </ol>

查看全部

0 采集收起
2018-03-22
天際

inline-block元素特点： 1、和其他元素都在一行上； 2、元素的高度、宽度、行高以及顶和底边距都可设置。

查看全部

0 采集收起来源：我还要站个大位置 - 内联块状元素
2014-11-09
Wardog

<hr/>相当于一条水平线，默认样式为较粗的灰线。hr是horizon的意思。

查看全部

0 采集收起来源：再来一个水平分割线 - 使用<hr>标签实现水平线标签
2018-03-22

首页上一页 27729 27730 27731 27732 27733 27734 27735 下一页尾页

0/150

提交

取消

开始学习

课程须知: 没有任何WEB经验的WEB应用程序开发者、对WEB前端技术感兴趣的用户均可学习本教程。

老师告诉你能学到什么？: 本教程代领大家轻松学习HTML(5)、CSS(3)样式基础知识，可以利用HTML(5)、CSS(3)样式技术制作出简单页面。