css基础1

一：CSS介绍

css被称为重叠样式表

重叠在于css拥有合并来自多个源的属性值的算法

像衣服一样，层层叠叠很多件穿在身上，别人看到的是露在表面上的衣服

[此处插入图片]，该图片作者为未知，来源于百度网站

样式表则是对网页设计元素，如字体，大小，颜色，间距的定义

二：css基本语法

选择器1，选择器2{

属性：值；

}

例子：设置标题1标题2的字体颜色为绿色
h1，h2{
color：green；
}

三:css引入方式

1.行内引入(和html类似 尽量避免)

<h1 style = "color:blue;">
标题内容
<h1>

2.内嵌式引入（页面abc都用同样样式的时候需要重复输入）

<style type="text/css">
h1{
color:red;
}
<style>
.........
<h1>标题内容</h1>

3.链接式引入（最常用）

<link href="样式文件链接" type="text/css" rel="stylesheet"/>

当以上引入方式都出现的时候，优先级：

行内>内嵌式>链接式

四：选择器介绍

1.ID选择器

#name1{id选择器以#开头
font-style：italicfont-style属性是否倾斜，值italic代表倾斜
}
...........
一个页面上只能用一次，id唯一
<p id="name1">content</p>

[此处插入图片]，该图片作者为西安交通大学的两位老师，来源于中国大学mooc，仅学习非商用。

2.类选择器

.name2{类选择器以.开头
color:red;
}
一个页面上可以使用多次
<p class="name2">content1</p>
<p class="name2">content2</p>

多类混用时效果叠加

.name3{
font-family:cursivefont-family定义字体，cursive草书
}
<h1 class="name2 name3">content4</h1>
content4的文本效果就是红色草书

四：其他选择器

1.页面划分选择器（div）

分区改变样式
<div class="name3">
<p class="name2">content1</p>
<p class="name2">content2</p>
<p >content3</p>
</div>
content1 content2的文本效果是红色草书，content3是草书

[此处插入图片]，该图片作者为西安交通大学的两位老师，来源于中国大学mooc，仅学习非商用。

2.span选择器

改变行内部分样式
<p> welcome to <span class="name2">xiannong's</span>blog</p>
xiannong's就会变成红色，其他不变

3.后代选择器

.name4 li{对name4中的li应用样式
font-weight：bold；设置粗体字体
}

<ul class="name4">
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
列表中的1111，2222，3333会被加粗

4.子元素选择器

h1 > strong {color:red;}选择h1里面的strong元素进行变红
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响