慕课网

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

初识HTML(5)+CSS(3)

最热最新

吴扬熙很懒

什么是选择器？每一条css样式声明（定义）由两部分组成，形式如下：选择器{ 样式; } 在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。比如右侧代码编辑器中第7行代码中的“body”就是选择器。

查看全部

0 采集收起来源：css3的游戏规则 - 什么是选择器？
2015-01-02
小云仙哥

target="_blank":在新窗口中浏览新的页面。 target="_self":在同一个窗口打开新的页面。 target="_parent":在父窗口中打开新的页面。(页面中使用框架才有用) target="_top" :以整个浏览器作为窗口显示新页面。(突破了页面框架的限制)

查看全部

0 采集收起
2018-03-22
wyhsy001

网页中的字体css样式代码也有他自己的缩写方式，下面是给网页设置字体的代码： body{ font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:"宋体",sans-serif; } 这么多行的代码其实可以缩写为一句： body{ font:italic small-caps bold 12px/1.5em "宋体",sans-serif; } 注意： 1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。 2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用： body{ font:12px/1.5em "宋体",sans-serif;}

查看全部

0 采集收起
2018-03-22
wyhsy001

颜色的css样式是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。例子1：p{color:#000000;}可以缩写为：p{color: #000;} 例子2：p{color: #336699;}可以缩写为：p{color: #369;}

查看全部

0 采集收起
2015-01-02
wyhsy001

盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左 margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/ 通常有下面三种缩写方法:1、如果top、right、bottom、left的值相同，如下面代码：margin:10px 10px 10px 10px;可缩写为：margin:10px; 2、如果top和bottom值相同、left和 right的值相同，如下面代码：margin:10px 20px 10px 20px; 可缩写为：margin:10px 20px; 3、如果left和right的值相同，如下面代码：margin:10px 20px 30px 20px; 可缩写为：margin:10px 20px 30px; 注意：padding、border的缩写方法和margin是一致的。

查看全部

0 采集收起
2015-01-02
wyhsy001

使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范： 1、参照定位的元素必须是相对定位元素的前辈元素： <div id="box1"> <div id="box2">相对参照元素进行定位</div> </div> 从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。 2、参照定位的元素必须加入position:relative; #box1{ width:200px; height:200px; position:relative; } 3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。 #box2{ position:absolute; top:20px; left:30px; } 这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。

查看全部

0 采集收起来源：Relative与Absolute组合使用
2018-03-22
吴扬熙很懒

三种方法的优先级有的小伙伴问了，如果有一种情况：对于同一个元素我们同时用了三种方法设置css样式，那么哪种方法真正有效呢？在右边编辑器就出现了这种情况 1、使用内联式CSS设置“超酷的互联网”文字为粉色。 2、然后使用嵌入式CSS来设置文字为红色。 3、最后又使用外部式设置文字为蓝色（style.css文件中设置）。但最终你可以观察到“超酷的互联网”这个短词的文本被设置为了粉色。因为这三种样式是有优先级的，记住他们的优先级：内联式 > 嵌入式 > 外部式但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样，<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）。感兴趣的小伙伴可以试一下，把它们调换顺序，再看他们的优先级是否变化。其实总结来说，就是--就近原则（离被设置元素越近优先级别越高）。但注意上面所总结的优先级是有一个前提：内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下，什么是权值呢？在后面的9-2小节中会讲解到。

查看全部

0 采集收起
2018-03-22
吴扬熙很懒

外部式css样式，写在单独的一个文件中外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码： <link href="base.css" rel="stylesheet" type="text/css" /> 注意： 1、css样式文件名称以有意义的英文字母命名，如 main.css。 2、rel="stylesheet" type="text/css" 是固定写法不可修改。 3、<link>标签位置一般写在<head>标签之内。

查看全部

0 采集收起
2018-03-22
吴扬熙很懒

嵌入式css样式，写在当前的文件中现在有一任务，把右侧编辑器中的“超酷的互联网”、“服务及时贴心”、“有趣易学”这三个短词文字字号修改为18px。如果用上节课我们学习的内联式css样式的方法进行设置将是一件很头疼的事情（为每一个<span>标签加入sytle="font-size:18px"语句），本小节讲解一种新的方法嵌入式css样式来实现这个任务。嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色： <style type="text/css"> span{ color:red; } </style> 嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。

查看全部

0 采集收起
2018-03-22
吴扬熙很懒

内联式css样式，直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢？从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。这一小节先来讲解内联式。内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码： <p >这里文字是红色。</p> 注意要写在元素的开始标签里，下面这种写法是错误的： <p>这里文字是红色。</p > 并且css样式代码要写在双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码： <p >这里文字是红色。</p>

查看全部

0 采集收起
2018-03-22
空灬灵

内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。

查看全部

0 采集收起
2018-03-22
wyhsy001

层模型--固定定位 fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。

查看全部

0 采集收起来源：我就在那不动了-层模型之固定定位
2015-01-02
吴扬熙很懒

CSS注释代码就像在Html的注释一样，在CSS中也有注释语句：用/*注释语句*/来标明（Html中使用)。就像下面代码：

查看全部

0 采集收起来源：听我再解释解释 - CSS注释代码
2018-03-22
吴扬熙很懒

CSS代码语法 css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示： p{font-size:12px;color:red;} 注意： 1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。 2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内，如下所示： p{ font-size:12px; color:red; }

查看全部

0 采集收起来源：瞧瞧css的庐山真面目吧 - CSS代码语法
2015-01-02
吴扬熙很懒

CSS样式的优势为什么使用css样式来设置网页的外观样式呢？右边编辑器是一段文字，我们想把“超酷的互联网”、“服务及时贴心”、“有趣易学”这三个短语的文本颜色设置为红色，这时就可以通过设置样式来设置，而且只需要编写一条css样式语句。第一步：把这三个短语用<span></span>括起来。（见右边代码编辑器13行）第二步：写入下列代码：（见右边代码编辑器7-8行） span{ color:red; } 观察结果窗口文字的颜色是否变为红色了。

查看全部

0 采集收起来源：为什么是css呢? - CSS样式的优势
2018-03-22

首页上一页 27095 27096 27097 27098 27099 27100 27101 下一页尾页

0/150

提交

取消

开始学习

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

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