CSS基本内容

CSS样式表的三种引入方式：

1、外部样式表——即将CSS样式写在单独的一个.css文件中：

<link rel="stylesheet" type="text/css" href="./css/custom.css" />

2、内部样式表：

<style type="text/css">
    h1{
        color: red
    }
</style>

3、内联样式表：

<h1 style="color: gold">标题</h1>

一个样式中，如果包含多个属性，则用分号隔开：

#container{
    width: 100%;
    height: 735px;
    background-color: #f4f4f4;
}

还可以多个样式使用同一个属性：

h1, a, h2{
    color: red;
}

继承（故称样式层叠表）：

一个标签内的所有元素都会继承该标签的样式，例如：

/*1、body内的text会变红，h1标签的text也会变红，a标签、h2标签以及其他所有标签的text都会变红。
2、但是样式的继承会存在覆盖：例如，body标签中有一个h1标签，那么h1的样式会覆盖掉body的样式。*/
body{
    color: black;
}

选择器：

1、派生选择器：

/*样式设置：*/
/*也就是先选择li标签，此时再选择，肯定就是选择li标签的strong标签，而不是其他地方的strong标签；
所以li的strong标签变红了，p的strong没变*/
li strong{
    color: red;
}
 
<!--效果测试-->
<p><strong>p的strong标签</strong></p>
<ul>
    <li><strong>li的strong标签</strong></li>
</ul>

2、id选择器(用#表示)：

<style type="text/css">
    #id{
        color: red;
    }
</style>
 
<divid="id">id选择器</div>

派生选择器和id选择器的联合使用：

<style type="text/css">
    /*就是说：在id="id"的标签下，设置a标签的样式*/
    #id a{
        color: red;
    }
</style>
 
<div id="id"><a>联合使用</a></div>

3、类选择器：

以一个点来表示：

<style type="text/css">
    .class{
        color: red;
    }
</style>
 
<div class="class"><a>类选择器</a></div>

与派生选择器联合使用（或者说，通过派生的方式来选择）：

<style type="text/css">
    .class a{
        color: red;
    }
</style>
 
<div class="class"><a>通过类选择器，来派生选择</a></div>

4、属性选择器：

设置指定了/拥有某个属性的标签的样式，通过[]来表示：

<style type="text/css">
    [title]{
        color: red;
    }
</style>
 
<div title="div">属性选择器</div>

更具体的选择：属性和值选择器：

<style type="text/css">
    [title=value]{
        color: red;
    }
</style>
 
<div title="value">属性和值选择器</div>
<div title="div">属性选择器</div>

背景方面：

CSS设置标签的背景图片、背景颜色：

<style type="text/css">
    body{
        background-image: url("1.png");
        background-color: black;
    }
</style>

设置背景图片的重复情况：

/*例如*/
background-repeat: no-repeat;

设置背景图片显示的位置：

/*这里有三种方式：属性值的形式是(x，y)；第三种的y坐标好像是向上为正*/
/*background-position: right top;*/
/*background-position: 100px 100px;*/
background-position: 0% 0%;

设置背景图片是否跟随页面的滚动而滚动：

/*设置成fixed就不会跟随滚动，其他就会跟随(测试的时候，选择一张尺寸较小的图片，并且不要重复)*/
background-attachment: fixed;

文本方面：

设置文本的大小写：

p{
    text-transform: capitalize;
}

文本的阴影效果：

h1{
    /*参数1、2是阴影相对于原文本的坐标值(x，y)，参数3是阴影的清晰度——阴影都是这样弄的*/
    text-shadow: 2px 2px 1px #FF0000;
}
 
<h1>text的效果</h1>

文本自动换行(normal不会将单词拆分，但是word-wrap的break-word会拆分)：

#test{
    width: 100px;
    /*text-wrap: normal;*/      /*deprecate*/
    word-wrap: normal;
}
 
<p id="test">hello world hello world </p>

a链接的四种状态及使用：

/*测试的时候，最好清除浏览数据，不然可能看不到link的效果*/
a:link {
    /*初始状态：从未被点击*/
    color: black;
}
a:visited{
    /*被点击过后(未清除浏览数据)，再次浏览该页面显示的状态*/
    color: red;
}
a:hover{
    /*鼠标放在a连接上，不点击*/
    color: gold;
}
a:active{
    /*鼠标单击a链接不松开：正在被点击的时刻*/
    color: white;
}
 
<!--如果没有href属性，是无法看到visited的效果的，因为没有进行访问(visit)-->
<a href="http://www.baidu.com">点击测试</a>

去掉a链接的下划线：

a{
    text-decoration: none;
}
 
<a href="http://www.baidu.com">点击测试</a>