初遇CSS

来源：互联网发布：淘宝店铺装修页头没了编辑：程序博客网时间：2024/06/07 11:39

今天结识了一个新朋友——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 {} , 通过“,”分割即可。

感谢您的阅读~

阅读全文

0 0