Html标签第二课css
css(Cascading Style Sheet)叠层样式表。用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
一:样式三种控制方法
1、行内样式:
<div style="height:100p; width:100px border:solid; red;"></div>
2、内嵌式
(1)标签选择器 优先级:标签选择器<class<id
<title></title>
<style type ="text/css">
div
{
width:100px;
height:20px;
border:solid 1px red;
}
</style>
<body>
<div></div>
</body>
(2)class选择器
<title></title>
<style type ="text/css">
div
{
width:100px;
height:20px;
border:solid 1px red;
color:green;
}
.c1
{
color:#F00(文字颜色); (文字颜色显示class里面设置的颜色)
}
.c2
{
font-size:36px;
}
</style>
<body>
<div> 你好1</div>
<div class=“c1 c2”> 你好2</div> 如果c1跟c2的样式有重复,c2的样式会将c1的样式覆盖了
<p class="c1">p标签也可以使用class选择器</p> 多个标签可以共用一个class,一个标签可以写多个class
</body>
(3)id选择器
<title></title>
<style type ="text/css">
div
{
width:100px;
height:20px;
border:solid 1px red;
color:green;
}
.c1
{
color:#F00(文字颜色); (文字颜色显示class里面设置的颜色)
}
.c2
{
font-size:36px;
}
#d1
{
color:green;
}
</style>
<body>
<div> 你好1</div>
<div class=“c1 c2”> 你好2</div> 如果c1跟c2的样式有重复,c2的样式会将c1的样式覆盖了
<p class="c1">p标签也可以使用class选择器</p> 多个标签可以共用一个class,一个标签可以写多个class
<div id="d1" class = "c1">你好3</div> id不能重复也不能是多个的,显示d1的样式,因为优先级:标签选择器<class<id
</body>
3、链接式
<title>标题</title>
<link rel = "stylesheet" type="text/css" href="css/demo.css(相对路径)"/>
4.导入样式(基本不用了,整个网页内容加载之后,才去加载样式表)
<title>标题</title>
<link rel = "stylesheet" type="text/css" href="css/demo.css(相对路径)"/>
<style>
@import url(css/demo.css)
</style>
当同时有行内样式,内嵌式,链接式出现时,采取就近原则; css的注释: /* */ Html的注释:<!-- -->
二:css字体样式
#d1
{
font-size:24px;(字体大小)
font-family:"隶书";(字体类型,电脑中有什么字体才能设置什么字体,C:\Windows\Fonts中看)
font-weight:700;(文字粗细,数值越大,字体加粗越厉害)
color:red;(字体颜色)
Text-decoration:underline /*下划线*/
Text-decoration:overline /*顶划线*/
Text-decoration:line-through; /*删除线*/
width:100px;
height:100px;
border:solid 1px red;
text-align:center/right/left(默认left);(水平居中)
line-height:100px;(lineheight值与高度相同)(垂直居中)
Text-transform:capitalize /*单词首字大写*/
Text-transform:uppercase /*全部大写*/
Text-transform:lowercase /*全部小写*/
Letter-spacing:10px (默认为normal)(字符间距)
}
<div id="d1"><p>google(这里的p标签只继承了文字的特性)</p></div>
计算机-工具-文件夹选项-查看,找到显示文件扩展名那一栏,可显示文件的扩展名;
FScapture(取色,测量,可以去掉电脑上任何一个地方的颜色)
Html标签第二课css的更多相关文章
- HTML第二课——css【2】
请关注公众号:自动化测试实战 现在继续上一节课的内容,看下面代码: <!DOCTYPE html><html><head> <meta charset= ...
- 萌新接触前端的第二课——CSS
前端知识——CSS CSS(英文全称:Cascading Style Sheets) 中文名层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各 ...
- HTML第二课——css
请关注公众号:自动化测试实战 先给大家提个建议,就是用sublime编辑器来编写.用其他的也无所谓,我只是建议,因为这个会帮你自动补全很多代码. css概念 css叫层叠样式表.意思就是一层一层的叠加 ...
- CI(CodeIgniter)框架入门教程——第二课 初始MVC
本文转载自:http://www.softeng.cn/?p=53 今天的主要内容是,使用CodeIgniter框架完整的MVC内容来做一个简单的计算器,通过这个计算器,让大家能够体会到我在第一节课中 ...
- 【JavaScript从入门到精通】第二课 初探JavaScript魅力-02
第二课 初探JavaScript魅力-02 变量 说起变量,我们不得不提起我们有一部比较古老的电视剧叫<包青天>.包青天有一把非常厉害的宝剑叫“尚方宝剑”,见到尚方宝剑有如见到皇帝.某种程 ...
- 【JavaScript从入门到精通】第二课
第二课 初探JavaScript魅力-02 变量 说起变量,我们不得不提起我们有一部比较古老的电视剧叫<包青天>.包青天有一把非常厉害的宝剑叫“尚方宝剑”,见到尚方宝剑有如见到皇帝.某种程 ...
- 【Web探索之旅】第二部分第二课:服务器语言
内容简介 1.第二部分第二课:服务器语言 2.第二部分第三课预告:框架和内容管理系统 第二部分第二课:服务器语言 介绍了Web的客户端,我们来谈谈Web的服务器端. 既然客户端有客户端的编程语言(HT ...
- 【Linux探索之旅】第一部分第二课:下载Linux,免费的噢
内容简介 1.第一部分第二课:下载Linux,免费的噢 2.第一部分第三课预告:测试并安装Ubuntu 下载Linux,免费的噢 大家好,上一课我们认识了非常“霸气侧漏”的Linux操作系统. 也知道 ...
- Asp.Net Web API 2(CRUD操作)第二课
Asp.Net Web API 2(CRUD操作)第二课 Asp.Net Web API 导航 Asp.Net Web API第一课:入门http://www.cnblogs.com/aehyok ...
随机推荐
- fstream文件操作
fstream(const char* filename, ios::openmode); ios::app: 以追加的方式打开文件 ios::ate: 文件打开后定位到文件尾,ios:app就包含有 ...
- 如何在本地电脑安装phpmyadmin及访问地址
因为要安装wordpress,上网查了下安装wordpress前要安装phpmyadmin,前提是要在自己本地电脑上安装APMSeverx虚拟主机才可以,在本地访问phpmyadmin页面.下面的步骤 ...
- CSS3--overflow属性
overflow:当内容溢出元素框时发生的事情: overflow:默认,内容不会裁剪,会呈现在元素框之外: overflow:hidden:内容会被裁剪,并且其余部分是不可见的(清除浮动) over ...
- iedriverserver使用报错
在win7下面使用IEdriverserver报错: AttributeError: 'Service' object has no attribute 'process' 1,下载最新的ie ...
- mysql 重置root密码
最近又项目用到mysql 由于电脑上mysql是很久以前安装的root密码忘记了, 百度一下重置密码 Windows: 1.以系统管理员登陆: 2.停止MySQL服务: 3.进入CMD,进入MySQL ...
- Objective-C( Foundation框架 一 NSDictionary (NSMutaleDictionary))
NSDictionary 不可变的字典 创建字典的方法 // 创建字典的方式 NSDictionary *dy = [NSDictionary dictionaryWithObject:@" ...
- java selenium (十一) 操作弹出对话框
Web 开发人员通常需要利用JavaScript弹出对话框来给用户一些信息提示, 包括以下几种类型 阅读目录 对话框类型 1. 警告框: 用于提示用户相关信息的验证结果, 错误或警告等 2. 提示框 ...
- 【思路】-URL重写
URL重写 重写原理 过程分析 疑惑地方 lookfor app.Request.ApplicationPath如果有子目录的话 这个地方可能会起到作用,暂时不确定 bool flag = url. ...
- Spring整合HBase
Spring整合HBase Spring HBase SHDP § 系统环境 § 配置HBase运行环境 § 配置Hadoop § 配置HBase § 启动Hadoop和HBase § 创建Maven ...
- php开发必备小工具
/*递归删除目录及目录下的文件*/ function del_dir($dir){ $files = new DirectoryIterator($dir); foreach ($files as $ ...