网页的美容师-CSS

CSS的引入方式

CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。

一、行内样式

使用style属性引入CSS样式。
例如

<hr  color="red"  /><p style="color: red">乌鸦坐飞机，龙卷风摧毁停车场</p>

网页效果

二、内部样式表
在style标签中书写CSS代码。style标签写在head标签中。
示例

p{/* font: font-style  font-weight  font-size/line-height  font-family;*//*font: italic bold 12px/20px arial,sans-serif ;*/color: green;}span{font-size: 100px;}.p{color: pink;}.blue{color: blue;}.red{color: red ;}.orange{color: orange;}.green{color: green;}.red1{color: red;}<p>小鸡炖蘑菇</p><p>托儿所</p><p>鱼尾纹</p><span>儿童劫</span><div class="p">提款姬</div><hr/><span class="blue">G</span><span class="red">o</span><span class="orange">o</span><span class="blue">g</span><span class="green">l</span><span class="red1">e</span><hr>

效果

三、外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。
语法：
1、链接式(推荐)

<link type="text/css"  href="CSS文件路径" />

2、导入式

<style type="text/css">@import url("css文件路径");
</style>

例如

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><link type="text/css" href="css.css"><style type="text/css">@import "css.css";</style>
</head>
<body><p class="p1">改革春风吹满地</p>
</body>
</html>

效果

三种方式的优先级是行内样式>内部样式>外部样式(后两者是就近原则)

网页的美容师-CSS相关推荐

网页的美容师---CSS
从HTML被发明开始,样式就以各种形式存在.不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制.最初的HTML只包含很少的显示属性.随着html的成长,为了满足前端开发者的需要,html新增很 ...
全栈 - 20 Web 基础网页的血肉 CSS
这是全栈数据工程师养成攻略系列教程的第二十期:20 Web基础网页的血肉CSS. HTML决定了网页中包含哪些内容,而CSS则决定了这些内容所呈现的样式. 什么是CSS CSS全拼是Cascadin ...
html局部可复制,截取网页局部区域css样式的方法和系统的制作方法
截取网页局部区域css样式的方法和系统的制作方法 [技术领域] [0001]本发明涉及计算机网络技术领域,特别是涉及一种截取网页局部区域CSS样式的方法和系统. [背景技术] [0002]CSS(Ca ...
css样式加入的法方,初学必知：XHTML网页中加入CSS的五种方_css
在Xhtml网页中如何加入css呢?这篇教程告诉大家引入CSS的几种方式. XHTML文件是通过CSS样式进行显示的控制的,也就是结合XHTML与CSS来表现页面内容.那么到底有哪些方式在XHTML文 ...
网页设计的css样式,网页设计引入CSS样式的五种方式_css
一.使用STYLE属性将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; -} 例如: <TD ...
使用浏览器获取网页模板(HTML+CSS)
使用浏览器获取网页模板(HTML+CSS) 一.获取网页的源代码进入网页,使用快捷键Ctrl+U查看网页源代码,也可以单击鼠标右键选择查看网页源代码获取. 网页源代码: 将网页源代码Ctrl+A全选 ...
韩顺平轻松搞定网页设计(html+css+js),韩顺平轻松搞定网页设计方案(html+css+js)之javascript现场授课笔记(完整版).doc...
2011韩顺平轻松搞定网页设计(html+css+js)之 javascript现场授课笔记(完整版) 视频18整和19的前半部分不用看 Javascript的基本介绍 JS是用于WEB开发的脚本语言 ...
HTML期末作业-旅游网页作业Html+css+Bootstarp
HTML期末作业-旅游网页作业Html+css+JavaScript+Bootstarp,共有8个页面部分网页截图网页源码 <!DOCTYPE html> <html lang= ...
dw 网页 html 布局,Dreamweaver网页制作之CSS布局规则
Dreamweaver网页制作之CSS布局规则导语:Dreamweaver网页制作过程必须用到的是CSS语言,下面就由小编为大家介绍一下Dreamweaver网页制作之CSS布局规则,欢迎大家阅读! ...
html网页左侧背景,CSS设置html网页背景图片 CSS设置网页背景颜色
CSS设置网页背景图片 CSS设置网页背景颜色技术教程篇本篇DIVCSS5以布局思想介绍使用CSS设置实现网页背景技巧为主,希望对DIV CSS爱好者有帮助.通常对网页设置背景直接对body设置背景 ...

网页的美容师-CSS

CSS的引入方式

网页的美容师-CSS相关推荐

最新文章

热门文章