css入门

来源：互联网发布：java 通过ftp下载文件编辑：程序博客网时间：2024/06/08 15:26

css入门

如果你已经有过html标签的过程,接下来必不可少的就是对html中的标签进行样式的修整，这些偏亮的样式就是要学习的css相关知识。
css由一条或者多条以分号隔开的样式组成，每一个样式包括属性和这些属性对应的值。
1 ：使用css

<p>我是一个段落</p><p style="color:red;font-size:50px;">我是被修饰的段落</p>

解释：上面的两个相同的p标签一个存在css样式，一个不存在css样式。
你可以编写在页面上查看这两句话的差别。在第二个标签:style表示行内样式属性，color表示段落字体颜色，font-size表示字体大小。

2：css使用的三种方式
2.1：元素内嵌样式
上面被修饰的p标签采用的就是元素内嵌样式
2.2：文档内嵌样式

下面代码采用的文档内嵌样式

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>css入门</title>    <style type="text/css">        .p{            color:red;            font-size:50px;        }    </style></head><body>    <p >我是一个段落</p>    <!-- <p style="color:red;font-size:50px;">我是被修饰的段落</p>-->    <p class="p">我是被修饰的段落</p></body></html>

2.3：外部引用样式
外部应用需要建立扩展名为.css的文件，然后在html文档中使用link标签引入.css文件。
下面是.css文件中的代码style.css

@charset utf-8;.p{    color:red;    font-size:50px;}

然后是htmlin文档代码，该文档代码中引入该css样式文件

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>css入门</title>    <link rel="stylesheet" href="style.css"></head><body>    <p >我是一个段落</p>    <p class="p">我是被修饰的段落</p></body></html>

3：css的层叠和继承
3.1：浏览器样式

<b>我是加粗字体</b><span>我是平常字体</span>

b标签本身就有加粗功能，在b标签内的文字是加粗过的样式。即使没有采用任何css进行修饰本身就有的功能简单来说就可以认为是浏览器样式
3.2：样式表层叠
样式表层叠通过五种方式进行，如果样式相同，那么比如会产生冲突替换。这时，它的优先级顺序就显的比较重要。以下优先级从低到高：
(1).浏览器样式（元素自身携带的样式）；
(2).外部引入样式（使用link引入的样式）；
(3).文档内嵌样式（使用style元素设置）；
(4).元素内嵌样式（使用 style 属性设置）。
如果某一个样式被优先级高的给替换掉了，却又想执行这个样式方案，可以将这个方案
标记成重要样式（important）。
//强行设置最高优先级
color: green !important;
3.3：样式继承
如果某一个元素并没有设置和父元素相关的样式，则该元素就会使用继承机制，把父元素的样式继承下来。

<p>p标签中的内容<b>我是p标签中的b标签</b></p><p style="color:red;">p标签中的内容<b>我是p标签中的b标签</p>

第一个p标签没有设置相关的样式，p标签中的没有在子标签b中的内容没有什么效果，而p标签中在b标签中的内容会有加粗样式。
第二个p标签有字体颜色的样式，虽然子标签b中没有进行相关的字体颜色设置，但是会使用继承机制把父标签的颜色样式继承下来。
另外继承机制只适用于元素的外观（文字，颜色，字体等），而在元素页面上的布局不会被继承。如果想要继承页面上的布局就要进行强制继承：inherit

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>css入门</title>    <style type="text/css">        p{            border:1px solid red;        }    </style></head><body>    <p>p标签中的内容<b>我是p标签中的b标签</b></p>    <p style="color:red;">p标签中的内容<b>我是p标签中的b标签</p></body></html>

运行上面的代码你可以看到p标签会有边框，如下图所示：
这里写图片描述
从图片中我们可以看到p标签的子标签b标签并没有边框。但是如果将style添加下面的代码:

b{    border:inherit;}

再次运行代码，效果图如下：
这里写图片描述

阅读全文

1 0