html-css样式表

一、CSS：Cascading Style Sheet—层叠样式表，其作用是美化HTML网页。

样式表分类：内联样式表、内嵌样式表、外部样式表

1、内联样式表

和HTML联合显示，控制精确，但是可重用性差，冗余多。

例如：<p style="font-size:14px;color:#000;">内联样式表</p>

红色部分即内联样式表，style即添加样式。

2、内嵌样式表

作为一个独立区域内嵌在网页里，必须写在head标签里面。

例如：<style type="text/css">

　　　　p 　　//格式对P标签有作用　　/*以标签名命名的样式表，对所有此类标签都会执行*/

　　　　{

　　　　　　样式

　　　　}

　　　　</style>

3、外部样式表

使用：新建一个CSS文件，用来放样式表。如果要在HTML文件中调用样式表，需要在HTML文件中点右键→CSS样式→附件样式表。一般用link连接方式。

★有些标签有默认的边距，一般写样式表代码的时候都会先去除，如下：

*　　//对所有标签起作用　　/*对所有标签去除边距和间距*/

{

　　margin:0px;

　　padding:0px;

}

</style>

二、选择器

1、标签选择器

p--------------标签选择器 //对P标签起作用

{

　　样式

}

2、class类选择器。---都是以“.”开头。

<head>

.main--------------------/*定义样式*/-----类选择器

{

　　height:42px;

　　width:100%;

　　text-align:center;

}

</style>

</head>

<body>

<div class="main">----------------调用class样式,可引用多次区别ID选择器

</div>

</body>

3、ID选择器。以“#”开头。

<head>

#main--------------------/*定义样式*/-----ID选择器

{

　　height:42px;

　　width:100%;

　　text-align:center;

}

</style>

</head>

<body>

<div id="main">----------------调用class样式，仅可以引用一次，区别与class选择器

</div>

</body>

4、复合选择器

1）、用“，”隔开，表示并列

p, span--------------对标签P和span两者都执行同样的样式

{

　　样式

}

</style>

2）、用空格隔开，表示后代。

.main p----------------类标签→p标签//首先找到引用“main”的标签，对该标签中的P标签起作用

{

　　样式

}

</style>

3）、筛选“.”

p.sp----------------p标签→类标签//首先找到p标签，对于p标签中引用了class="sp"的标签起作用，执行以下样式

{

　　样式

}

</style>

三、练习：

HTML：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>---------------内嵌样式表
*-------------------------------------对所有标签去除边距和间距
{
margin:0px;
padding:0px;
}
</style>
<link href="yangshi1.css" rel="stylesheet" type="text/css" />-----------------------------引用外部样式表
</head>

<body>
<div>
<p style="font-size:24px; font-weight:bold; background-color:#FFC; color:#F00; text-align:center;">你好,欢迎浏览！</p>--------内联样式表
</div>
<div class="shi">------------------引用类选择器
<p>写一首诗</p>
<p class="shineirong">床前明月光</p>----------类选择器可多次引用
<p class="shineirong">哈哈哈哈哈</p>----------类选择器可多次引用
<p class="shineirong">哈哈哈哈哈</p>
<p class="shineirong">哈哈哈哈哈哈哈哈哈</p>
</div>
<div id="ge">-------------引用id选择器，只能引用一次
<p>唱一首歌</p>
</div>
<div id="wu">
<p>跳个舞</p>
</div>
<p><a href="http://www.baidu.com" target="_blank">百度</a>----------超链接
</p>
</body>
</html>

外部样式表：

@charset "utf-8";
/* CSS Document */
<style type="text/css">
p{---------------------------标签选择器
margin:0px;
padding:0px;
}
.shi{----------------------------类选择器
height:200px;
width:200px;
font-weight:bold;
color:#F03;
background-color:#CCC;
text-align:center;
}
#ge{--------------------------id选择器
margin:0px 290px 0px;
height:200px;
width:300px;
font-weight:bold;
color:#F03;
background-color:#0FF;
text-align:center;
line-height:200px;
}
.shineirong{
font-size:14px;
color:#30F;
font-weight:bold;
line-height:40px;
vertical-align:middle;
}
#wu{
height:auto;
width:auto;
font-size:24px;
font-weight:bold;
text-align:center;
margin:10px;
background:#0F0;
}
a:link{--------------------超链接样式，未点击，展示时样式
color:#000;
font-weight:bold;
font-size:35px;
text-decoration:none;
}
a:visited{----------------------访问完成时样式
color:#000;
}
a:hover{----------------------鼠标指向悬浮时样式
color:yellow;
}
a:active{-----------------------点击时样式
color:green;
}
</style>

转载于:https://www.cnblogs.com/jingzhenhua/p/5813379.html

html-css样式表相关推荐

css样式表和选择器
CSS样式----图文详解:css样式表和选择器主要内容 CSS概述 CSS和HTML结合的三种方式: 行内样式表 . 内嵌样式表 . 外部样式表 CSS四种基本选择器: 标签选择器 . 类选择器 ...
JavaScript对css样式表操作
CSS样式表3种方式: 内嵌:写在html标签中的样式 :如:<p style="width:100px"> 内嵌</p> 内联:写在html 中<h ...
（转）CSS样式表继承详解
什么是css 继承? 要想了解css样式表的继承,我们先从文档树(HTML DOM)开始.文档树由HTML元素组成. 文档树和家族树类似,也有祖先.后代.父亲.孩子和兄弟^_^.这很容易理解吧,笔者在 ...
(原创分享，改进版)CSS样式表速成！
大话CSS样式表速成程序和美工一直是相辅相成的,一个好的Web项目需要不仅仅是程序的完美,同样一个好的用户使用页面,也可以吸引一大部分用户.往往在传统的概念里,程序和美工总是被分开来说.一方面,这 ...
CSS样式表初始化代码
CSS为什么要初始化?建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化样式会对SEO有一定的影 ...
php html5 css样式,怎么在html页面写css样式表
本教程操作环境:windows7系统.html5和css3版,该方法适用于所有品牌电脑. 在html页面写css样式表 1.首先可以直接把css代码写在现有的HTML标签元素的开始标签里面,并且css ...
前端技术分享：一个超级好用的CSS样式表
大家可以经常逛一些程序员比较喜欢的论坛贴吧,你会有不一样的惊喜呢,今天小千就来给大家分享一个在GitHub上面发现的超级好用的CSS样式表,来看一看. 看名称本以为是一个动画库,但是看下来才发现这是一 ...
html美化计算机,职称计算机Dreamwaver教程：CSS样式表滤镜
职称计算机Dreamwaver教程:CSS样式表滤镜导语:CSS是Cascading Style Sheet 的缩写.译作「层叠样式表单」.是用于(增强)控制网页样式并允许将样式信息与网页内容分离的 ...
css样式引入形式php,引入css样式表的四种方式介绍
一.使用STYLE属性: 将STYLE属性直接加在个别的元件标签里. 这种用法的优点是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』. 二.使用STYLE标签: 将样式规则写在标签之 ...
外链式样式表_引入CSS样式表（书写位置）
CSS初识 CSS(Cascading Style Sheets) 美化样式 CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片 ...

html-css样式表

html-css样式表相关推荐

最新文章

热门文章