CSS学习

最新推荐文章于 2024-06-17 19:23:30 发布

yangguirong123

最新推荐文章于 2024-06-17 19:23:30 发布

阅读量240

点赞数

CC 4.0 BY-SA版权

分类专栏：我的java修行之路

本文链接：https://blog.youkuaiyun.com/yangguirong123/article/details/53185669

我的java修行之路专栏收录该内容

11 篇文章

订阅专栏

概念：

CSS 指层叠样式表 (Cascading Style Sheets)

样式定义如何显示 HTML 元素（我们编辑的html在界面中显示是用什么格式，风格，颜色，背景。）

css的语法：

css由两部分构成：选择器和一条或者多条的样式组。

1.选择器：Slector（html的元素）

id ；class选择器

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

例：

<style>
#para1
{
	text-align:center;
	color:red;
} 
</style>
</head>

<body>
<p id="para1">Hello World!</p>

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

例：

<style>
.center
{
	text-align:center;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>

2.样式表：有一组样式或者多组样式构成

样式分为三种：

外部样式表
内部样式表
内联样式

外部样式表：

当同一个样式需要应用多个页面的时候，外部样式表效率会非常的高。他是将样式表作为一个单独的文件保存在外面，需要引用的时候，盗用引入到页面中即可：调用语句为

<headf>

< link rel=" stylesheet " type="text/css" href="mystyle.css"> mystyle.css 作为地址读到样式声明，并根据它来格式文档。

</head>

--------------------------------------------------------------------------------

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。

内部样式表：

区别与外部样式的是如果单个文档需要特殊的样式时，就应该使用内部样式表。

例：

<head>
<style>
hr {color:000000;}颜色黑色
p {margin-left:20px;}左外距离是20
body {background-image:url("images/back40.gif");}传入背景图地址
</style>
</head>

--------------------------------------------------------------------------------

内联样式：

当样式只需要在一个html元素上应用一次的时候，就会使用内联样式。缺点是会损失掉样式表的许多优势，代码的可读性降，显得杂乱无章

例：

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

---------------------------------------------
 
多重样式:
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。 
例:
 
外部样式表的三个属性
h3
{
color:red;
text-align:left;
font-size:8pt;
}
 
内部样式表的三个属性
h3
{
text-align:right;
font-size:20pt;
}
 
假如拥有内部样式表的这个页面与外部样式表链接，那么 h3 得到的样式是：
color:red;
text-align:right;
font-size:20pt;
颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。
 
注：当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？（1-4最低到最高）
 
浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）