文档章节

HTML——CSS基础

o
 osc_4h4pnshu
发布于 2019/12/22 11:41
字数 3113
阅读 16
收藏 0
red

「深度学习福利」大神带你进阶工程师,立即查看>>>

一、引入CSS样式表

1、行内式

通过标记的style属性来设置元素的样式。基本语法如下:

<标记名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;">
    主体内容
</标记名>

示例:

<!doctype>
<html>
<head>
<meta charset="utf-8">
<title>行内式引入CSS样式表</title>
</head>

<body>
    <h2 style="font-size:20px; color:red;">使用CSS行内式修饰二级标题的字体大小和颜色</h2>
</body>
</html>

注:只在样式规则较少且只在该元素上使用一次,或者需要临时修改某个样式规则时使用。

2、内嵌式

将CSS代码集中写在HTML文档的<head>头部标签中,并且用<style>标记定义。基本语法如下:

<head>
<style type="text/css">
    选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
</style>
</head>

示例:

<!doctype>
<html>
<head>
<meta charset="utf-8">
<title>内嵌式引入CSS样式表</title>
<style type="text/css">
h2{text-align:center;}
p{
    font-size:16px;
    color:red;
    text-decoration:underline;
}
</style>
</head>

<body>
<h2>内嵌式CSS样式</h2>
<p>使用style标记可定义内嵌式CSS样式表,style标记一般位于head头部标记中,title标记之后。</p>
</body>
</html>

3、链入式

将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过<link/>标记将外部样式表文件链接到HTML文档中,基本语法为:

<head>
    <link href="CSS文件的路径" type="text/css" rel="stylesheet" />
</head>

<link/>标记必须放在<head>头部标记中,并且必须指定<link/>标记的三个属性:

  • href:定义所链接外部样式表文件的URL。
  • type:定义所链接文档的类型,在这里需要指定为"text/css"。
  • rel:定义当前文档与被链接文档之间的关系,在这里需要指定为"stylesheet",表示被链接的文档是一个样式表文件。

html文档:

<!doctype>
<html>
<head>
<meta charset="utf-8">
<title>链入式引入CSS样式表</title>
<link href="style/css" type="text/css" rel="stylesheet" />
</head>

<body>
    <h2>链入式CSSY样式</h2>
    <p>通过link标记可以将扩展名为.css的外部样式表文件链接到HTML文档中。</p>
</body>
</html>

css文档:

h2{ text-aligh:center; }
p{
    font-size:16px;
    color:red;
    text-decoration:underline;
}

二、CSS基础选择器

1、标记选择器

指用HTML标记名作为选择器,按标记名称分类,为页面中某一类标记指定统一的CSS样式。

基本语法:
标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

代码:

<head>
    <style>
        /* 标签选择器 */
       p{
            font-size:12px; 
            color:#666; 
            font-family:"微软雅黑";
        }
    </style>
</head>

<!--标签选择器 -->
<body>
    <p>这段文字用标签选择器设置CSS样式</p>
</body>

注:优点:能快速为页面中同类型的标记统一样式。 缺点:不能设计差异化样式。

2、类选择器

类选择器使用"."(英文点号)进行标识,后面紧跟类名。

基本语法:
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

优势:可以为元素对象定义单独或相同的样式。

代码:

<!doctype>
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>
<style type="text/css">
.red{color:red;}
.green{color:green;}
.font22{font-size:22px;}
p{
    text-decoration:underline;
    font-family:"微软雅黑";
}
</style>
</head>

<body>
    <h2 class="red">二级标题文本</h2>
    <p class="green" font22>段落一文本内容</p>
    <p class="red" font22>段落二文本内容</p>
</body>
</html>

注:类名第一个字符不能使用数字,并且严格区分大小写。

3、id选择器

id选择器使用"#"进行标识,后面紧跟id名。

基本语法:
#id名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

代码:

<!doctype>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<style type="text/css">
#bold {font-weight:bold;}
#font24 {font-size:24px;}
</style>
</head>

<body>
    <p id="bold">段落1:id="bold",设置粗体文字。</p>
    <p id="font24">段落2:id="font24",设置字号为24px。</p>
    <p id="font24">段落3:id="font24",设置字号为24px。</p>
    <p id="bold font24">段落4:id="bold font24",同时设置粗体和字号24px。</p>
</body>
</html>

4、通配符选择器

通配符选择器用“*”表示,它是所有选择器中作用范围最广的,能匹配页面中所有的元素。

基本格式:
*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

代码:

*{
    margin:0;        /*定义外边距*/
    padding:0;        /*定义内边距*/
}

注:实际开发中不建议使用通配符选择器。

5、标签指定式选择器

标签指定选择器又称交集选择器,由两个选择器构成。第一个为标记选择器,第二个为class选择器或id选择器。

代码:

<!doctype>
<html>
<head>
<meta charset="utf-8">
<title>标签指定式选择器的应用</title>
<style type="text/css">
p{color:blue; }
.special{color:red; }
</style>
</head>

<body>
    <p>普通段落文本(蓝色)</p>
    <p class="special">指定了.special类的段落文本(红色)</p>
    <h3 class="special">指定了.special类的标题文本(绿色)</h3>
</body>
</html>

注:两个选择器之间不能有空格。如h3.special或p#one。

6、后代选择器

后代选择器用来选择或元素组的后代,其写法就是把外层标记写在前面,内层标记写在外面,中间用空格分隔。

当标记发生嵌套时,内层标记就成为外层标记的后代。

代码:

<!doctype>
<html>
<head>
<meta charset="utf-8">
<title>后代选择器</title>
<style type="text/css">
p strong{color:red;}
Strong{color:blue;}
</style>
</head>

<body>
    <p>段落文本<strong>嵌套在段落中,使用strong标记定义的文本(红色)。</strong></p>
    <strong>嵌套之外由strong标记定义的文本(蓝色)。</strong>
</body>
</html>

7、并集选择器

并集选择器是各个选择器通过逗号连接而成的,任何形式的选择器(包括标记选择器、类选择器及id选择器等),都可以作为并集选择器的一部分。

代码:

<!doctype>
<html>
<head>
<meta charset="utf-8">
<title>并集选择器</title>
<style type="text/css">
h2,h3,p{color:red; font-size:14px;}
h3,special,#one{text-decoration:underline;}
</style>
</head>

<body>
    <h2>二级标题文本。</h2>
    <h3>三级标题文本,加下划线。</h3>
    <p class="special">段落文本1,加下划线。</p>
    <p id="one">段落文本3:加下划线。</p>
</body>
</html>

三、字体样式属性

1、font-size:字号大小

用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。

CSS长度单位:
相对长度单位:
    em:    相对于当前对象内文本的字体尺寸
    px:    像素,最常用,推荐使用
绝对长度单位:
    im:    英寸
    cm:    厘米
    mm:    毫米
    pt:    点

2、font-family:字体

用于设置字体。

示例:

p{font-family:"微软雅黑";}

可以同时指定多个字体,中间以逗号隔开:
body{font-family:"华文彩云","宋体","黑体";}

注:使用font-family设置字体时,需要注意以下几点。

  • 各种字体之间必须使用英文状态下的逗号隔开。
  • 中文字体需要加英文状态下的引号,当需要设置英文字体时,英文字体名必须位于中文字体名之前,例如:
body{font-family:Arial,"华文彩云","宋体","黑体";}    /*正确*/
body{font-family:"华文彩云","宋体","黑体",Arial;}    /*错误*/
  • 如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号。

3、font-weight:字体粗细

用于定义字体的粗细。

font-weight可用属性值
    nomal:        默认值。定义标准的字符
    bold:        定义粗体字符
    bolder:        定义更粗的字符
    lighter:    定义更细的字符
    100~900(100的整数倍):
                定义由细到粗的字符。

注;常用的font-weight的属性值为normal和bold。

4、font-style:字体风格

用于定义字体风格,如设置斜体、倾斜或正常字体。其可用属性值为:

  • normal:默认值,浏览器会显示标准的字体样式。
  • italic:浏览器会显示斜体的字体样式。
  • oblique:浏览器会显示斜体的字体样式。

注:实际工作中一般用italic定义斜体。

5、font:综合设置字体样式

基本语法格式:

选择器{font:font-style font-weight font-size/line-height font-family;}

注:必须按上面语法格式中的顺序书写,各个属性以空格隔开。

p{
    font-family:Arial,"宋体";
    font-size:30px;
    font-style:italic;
    font-weight:bold;
    font-variant:small-caps;
    line-height:40px;
}

注:必须设置font-size和font-family属性,否则font属性将不起作用。

<!doctype>
<html>
<head>
<meta charset="utf-8">
<title>font属性</title>
<style type="text/css">
.one{ font:italic 18px/30px "隶书";}
.two{ font:italic 18px/30px;}
</style>
</head>

<body>
    <p class="one">段落1:使用font属性综合设置段落文本的字体风格、字号、行高和字体。</p>
    <p class="two">段落2:使用font属性综合设置段落文本的字体风格、字号和行高。由于省略了字体属性font-family,这时font属性不起作用。</p>
</body>
</html>

6、word-wrap属性

用于实现长单词和URL地址自动换行。

基本语法格式:

选择器{word-wrap:属性值;}
word-wrap属性值:
    normal:        只在允许的断字点换行
    break-word:    在长单词或URL地址内部进行换行

示例:

<!doctype>
<html>
<head>
<meta charset="utf-8">
<title>word-wrap属性</title>
<style type="text/css">
    p{
        width:100px;
        height:100px;
        border:1px solid #000;
    }
    .break_word{word-wrap:break-word;}
</style>
</head>

<body>
    <span>word-wrap:normal;</span>
    <p>百度浏览器网址:http://baidu.com</p>
    <span>word-wrap:break-word;</span>
    <p class="break_word">百度浏览器网址:http://baidu.com</p>
</body>
</html>

四、文本外观属性

1、color:文本颜色

用于定义文本的颜色,其取值方式有如下3种。

预定义的颜色值,如red,green,blue等。

十六进制,如#FF0000,#FF6600,#29D794等。

RGB代码,如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

2、letter-spacing:字间距

用于定义字间距。允许使用负值,默认为normal。

3、word-spacing:单词间距

用于定义单词之间的间距,对中文字符无效。允许使用负值,默认为normal。

示例:

<!doctype>
<html>
<head>
<meta charset="utf-8">
<title>word-spacing和letter-spacing</title>
<style type="text/css">
    .letter{ letter-spacing:20px; }
    .word{ word-spacing:20px; }
</style>
</head>

<body>
    <p class="letter">letter spacing(字母间距)</p>
    <p class="word">word spacing word spacing(单词间距)</p>
</body>
</html>

4、line-height:行间距

用于设置行间距。

示例:

<!doctype>
<html>
<head>
<meta charset="utf-8">
<title>word-spacing和letter-spacing</title>
<style type="text/css">
    .one{
        font-size:16px;
        line-height:18px;
    }
    .two{
        font-size:12px;
        line-height:2em;
    }
    .three{
        font-size:12px;
        line-height:120%;
    }
</style>
</head>

<body>
    <p class="one">段落1:使用像素px设置line-height。该段落字体大小为16px,line-height属性值为18px。</p>
    <p class="two">段落2:使用相对值em设置line-height。该段落字体大小为12px。line-height属性值为2em。</p>
    <p class="three">段落3:使用百分比%设置line-height。该段落字体大小为14px。line-height属性值为150%。</p>
</body>
</html>

5、text-transform:文本转换

用于控制英文字符的大小写。

  • name:不转换(默认值)
  • capitalize:首字母大写
  • uppercase:全部字符转换为大写
  • lowercase:全部字符转换为小写
  • 6、text-deciration:文本装饰

用于设置文本的下划线,上划线、删除线等装饰效果。

  • none:没有装饰(正常文本默认值)
  • underline:下划线
  • overline:上划线
  • line-through:删除线

注:text-transform后可以赋多个值,用于给文本添加多种显示效果。

示例:

<!doctype>
<html>
<head>
<meta charset="utf-8">
<title>文本装饰text-decoration</title>
<style type="text/css">
    .one{text-decoration:underline;}
    .two{text-decoration:overline;}
    .three{text-decoration:line-through;}
    .four{text-decoration:underline line-through;}
</style>
</head>

<body>
    <p class="one">设置下划线(underline)</p>
    <p class="two">设置上划线(overline)</p>
    <p class="three">设置删除线</p>
    <p class="four">同时设置下划线和删除线(underline line-through)</p>
</body>
</html>

7、text-align:水平对齐方式

用于设置文本内容的水平对齐,相当于html中的align对齐属性,其可用属性值:

  • left:左对齐(默认值)
  • right:右对齐
  • center:居中对齐

注:

1.text-align属性仅适用于块级元素,对行内元素无效。

8、text-indent:首行缩进

用于设置首行文本的缩进。

<!doctype>
<html>
<head>
<meta charset="utf-8">
<title>首行缩进text-indent</title>
<style type="text/css">
    p{font-size:14px;}
    .one{text-indent:2em;}
    .two{text-indent:50px;}
</style>
</head>

<body>
    <p class="one">这是段落1中的文本,text-indent属性可以对段落文本设置首行缩进效果,段落1使用text-indent:2em;。</p>
    <p class="two">这是段落2中的文本,text-indent属性可以对段落文本设置首行缩进效果,段落2使用text-indent:50px;。</p>
</body>
</html>

注:text-line属性仅适用于块级元素。对行内元素无效

o
粉丝 1
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
浅入浅出Android(003):使用TextView类构造文本控件

基础: TextView是无法供编辑的。 当我们新建一个项目MyTextView时候,默认的布局(/res/layout/activity_main.xml)中已经有了一个TextView: <TextView 运行效果如下: 修改其文本内容...

樂天
2014/03/22
665
1
CSS Browser Selector

CSS Browser Selector 是一个小的 JS 库,可增强 CSS 的选择器功能,支持根据不同的操作系统和浏览器来编写指定的 CSS 代码,可检测浏览器、浏览器版本、平台、平台版本、设备、设备版本、m...

匿名
2013/01/17
2.8K
1
Web开发组件管理器--Bower

Bower 是一个针对Web开发的包管理器。该工具主要用来帮助用户轻松安装CSS、JavaScript、图像等相关包,并管理这些包之间的依赖。 功能有些类似于Component。不同之处是,Component是围绕Git...

匿名
2013/02/01
1.2W
2
Javascript图元绘制库--ternlight

基于HTML CANVAS API的Javascript库,提供在HTML页面上绘制图元——如流程图的能力。 目前已支持简单的矩形图元和图元间的连线(直线、直角连线两种),拖拽图元等能力。 该javascript librar...

fancimage1
2013/02/07
6.3K
1
实时分析系统--istatd

istatd是IMVU公司工程师开发的一款优秀的实时分析系统,能够有效地收集,存储和搜索各种分析指标,类似cacti,Graphite,Zabbix等系统。实际上,istatd修改了Graphite的存储后端,重新实现了...

匿名
2013/02/07
3K
1

没有更多内容

加载失败,请刷新页面

加载更多

一道多线程面试题区分平庸与卓越

展开 本文分享自微信公众号 - Java架构师联盟(msbxq2019)。 如有侵权,请联系 support@oschina.cn 删除。 本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。...

Java架构师联盟
04/22
0
0
推荐 33 个 IDEA 最牛配置,写代码太爽了

来源:http://u6.gg/sS7XJ 1.设置maven 1.在File->settings->搜索maven 2.Mavan home directory--设置maven安装包的bin文件夹所在的位置 3.User settings file--设置setting文件所在的位置 ......

程序员闪充宝
04/08
0
0
各位端午节快乐[玫瑰]

本文分享自微信公众号 - 漫游前端世界(gh_6ac344b74a01)。 如有侵权,请联系 support@oschina.cn 删除。 本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。...

Chorer
06/25
9
0
6个超酷的网站,专门用于学习算法

https://mp.weixin.qq.com/s?__biz=MzIwNTc4NTEwOQ==&mid=2247488953&idx=2&sn=9b45800a84113d9a573539de043dcf9c&chksm=972ac4c3a05d4dd524522990e631768d7eb73a483bf62fb3496711953e625832......

osc_wfvuuuju
23分钟前
11
0
网络安全-跨站请求伪造(CSRF)的原理及防御

目录 简介 原理 举例 漏洞发现 链接及请求伪造 CSRF攻击 不同浏览器 未登录状态 登录状态 代码查看 防御 用户 供应商(程序员) 简介 跨站请求伪造(Cross-site request forgery),也被称为...

osc_bs9rqgec
25分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部