简单搭建网站
从零开始学习

html连接css样式表

css(层叠样式表),用于装饰网页,用css装饰的网页会更加的精致,而单纯的html写出的网页看起来比较粗糙,css也拥有更全面的控制权,比如一个字体,html调节有限制,css是没有任何限制的,想怎么改就怎么改,并且你想认真的做一个网页的话css是绝对不能缺少的,css的难度也不高,就记住一个基本的语法,其它的就套上去就行了

请先了解下面html文章再学习css

css基本语法

#基本语法#
选择器{
属性:属性值;
属性:属性值;
}

选择器为css要应用到的地方

标签选择器:指定某个标签应用css样式

#定义p标签应用css样式#
p{
属性:属性值;
}

id选择器:给指定部分使用css样式(实际使用中不推荐)

id选择器取名第一个不能是数字

#css处#
#a{
属性:属性值;
}
#标签处#
<p id="a">应用样式的段落</p>

class选择器:给指定部分使用css样式(建议使用)

class选择器起名第一个不能是数字,实际使用中都是class选择器来使用css,id选择器一般都是用于js脚本

#css处#
.a{
{
属性:属性值;
}
#标签处#
<p class="a">运用样式的段落</p>

选择器讲完了就是连接样式的的方法了,连接css的方法有三种

  • 内嵌式:直接在标签中插入样式(不推荐)
  • 内联式:样式放在head,标签处引用
  • 外联式:样式单独用一个文件包含,后缀为.css,需要在html文档head头部用link标签连接,标签处引用,看起来麻烦,实际上外联会更加容易管理

优先级:内嵌式>内联式>外联式,假如你一个html文档有三个样式表同时应用于<p>标签,那么它会自动采用优先级高的样式表应用

内嵌式

<h1 style="font-family:楷体;text-align:center;">居中的楷体标题</h1>

内嵌式示例

提示:你可以先修改部分代码再运行。

内联式

#我用的class选择器#
<!doctype html>
<html>
<head>
<title>内联式示例</title>
<meta charset="utf-8">
<style type="text/css">
.h1{
font-family:楷体;
text-align:center;
}
</style>
</head>
<body>
<h1 class="h1">居中的楷体标题</h1>
</body>
</html>

内联式示例

提示:你可以先修改部分代码再运行。

外联式

样式表取名1.css,下面为样式文件

.h1{
font-family:楷体;
text-align:center;
}

下面为html文档处

<!doctype html>
<html>
<head>
<title>外联式示例</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/css/1.css"
</head>
<body>
<h1 class="h1">居中的楷体标题</h1>
</body>
</html>

外联式示例

提示:你可以先修改部分代码再运行。

css注释

注释就是给css留个备注,方便管理

#css注释#
.h1{
font-family:楷体;
/*设置文本为楷体*/
text-align:center;
/*设置文本居中*/
}

日常使用大多都是使用外联式,因为到后期方便管理

赞(1) 打赏梁某人
未经允许不得转载:每篇文章都是博主的心血,偷盗文章事最可耻的事情梁某人的个人网站 » html连接css样式表

发表评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

梁某人的个人网站

免费云存储免费云存储

靓仔!打赏一元试试看啊

支付宝扫一扫打赏

微信扫一扫打赏