初遇CSS

最新推荐文章于 2024-09-29 21:43:16 发布

芝麻开花不开门

最新推荐文章于 2024-09-29 21:43:16 发布

阅读量376

点赞数

文章标签： css

本文链接：https://blog.csdn.net/Luyanc/article/details/78576771

版权

牛腩新闻发布系统专栏收录该内容

6 篇文章 0 订阅

订阅专栏

今天结识了一个新朋友——CSS，初步印象如下：

1、CSS的英文全称：Cascading Style Sheets

2、CSS中文名：层叠样式表

3、CSS用来干什么呢？：将网页内容和样式进行分离，设计网页内容的样式

4、如何将网页内容与CSS建立联系？：直接将css样式表拖到HTML页的</title>末尾，然后就会立马生成一句代码，这样就建立联系了。

5、我们先来认识几个简单的单词：

（1）id：id选择器

（2）class：类选择器，简单说就是一个标记，可以通过标记找到内容。

（3）body：HTML标签选择器

6、CSS选择器优先级：id选择器>类选择器>HTML标签选择器

7、如何通过CSS设置网页内容样式？让我们举一个小栗子吧：

首先我们有一个HTML页，内容如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>CSS测试</title>
    <link href="css/StyleSheet.css" rel="stylesheet" />
</head>
<body>
    <span id="special" class ="menu">栏目四</span>
    <span class ="menu wu">栏目五</span>
    <span class ="menu">栏目六</span>
    <span class ="title">这是一条<span>新闻</span>标题</span>
    123456
</body>
</html>

然后我们的css内容如下：

body {
    color :#eb20e7;  
}
.menu {  /*栏目样式*/
    color:#f00; /*文字颜色*/
}

.title {  /*新闻标题样式*/
    color:#00ff90;  
}

#special {
    font-weight :bold ;    /*粗体*/
    color:#ffd800;
}

.title span {
    color :#1818e1;
    font-weight :bold ;
    font-size :larger;
}

.menu, .title {
    background-color :#000;
}

.wu {
    color :#faecec;
}

（1）class中可以写多个样式标记，如果这多个样式标记都对内容设置不同的颜色，那么内容的最终颜色取决于css中最下边的那个样式设置。

（2）class中还可以并列设置样式，如.menu,.title {} , 通过“,”分割即可。

感谢您的阅读~