css基础知识讲解 -1

css基础知识

概括了解

CSS-层叠样式表

​ （Cascading Style Sheets）层叠样式表

用途

样式定义如何显示 HTML 元素

样式通常存储在样式表中

把样式添加到 HTML 中，是为了解决内容与表现分离的问题

外部样式表可以极大提高工作效率

外部样式表通常存储在 CSS 文件中

分类

• 内部样式-head区域style标签里面 <style></style>

• 外部样式-link调用

  格式:
  	<link href="main.css" rel="stylesheet" type="text/css">
  

• 内联样式-标签元素里面（style=“属性：属性值；属性：属性值”）

相同权值情况下，CSS样式的优先级总结来说，就是——就近原则（离被设置元素越近优先级别越高）：

内联样式表（标签内部） > 嵌入样式表（当前文件中）> 外部样式表（外部文件中）

格式

样式规则格式： 选择符{属性:值}

单一选择符的复合样式声明应该用分号分割： 选择符{属性1:值1; 属性2:值2}、

a{
    font-size:36px;
    color:#FF0004;
}

常用属性

基础语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

/*值的不同写法和单位
除了英文单词 red，我们还可以使用颜色值 #ff0000：*/
p { color: #ff0000; }

/*为了节约字节，我们可以使用 CSS 的缩写形式：*/
p { color: #f00; }

/*我们还可以通过两种方法使用 RGB 值：*/
p { color: rgb(255,0,0); }
p { color: rgba(0,0,0,0.9); }

选择器的运用

1. id:定义元素在页面中独一无二的名称 #id

2. class:引用类选择器时使用(CSS中) .class, class命名不能以数字开头

选择器的分组

可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。

用逗号将需要分组的选择器分开。

 h1,h2,h3,h4,h5,h6 {color: green;} 

派生选择器

分3种情况：后代选择器，子元素选择器，相邻兄弟选择器

• 后代选择器

如：h1 em {color:red;}

表示在h1标签内部的所有em标签
如：
<h1>
	<em>111</em>
</h1>

或者：
<h1>
    <h2>
        <em>222</em>
    </h2>
</h1>

• 子选择器

  子选择器只会选择某个元素的子元素，而不会扩大到任意的后代元素。

h1 > strong {color:red;}
h1标签的内部第一个标签是strong时， 该strong标签起作用
如：
<h1>
    <strong>111111</strong>
</h1>

不包括下面这种情况：
<h1>
    <h2>
        <strong>222222</strong>
    </h2>
</h1>

• 相邻兄弟选择器

h2 + strong {color:red;} 
h2标签的下一个strong标签起作用

<h1>
    <h2>This is a heading<h2>
    <strong>This will be styled</strong>  <!--起作用-->
    <strong>This will not be styled</strong> <!--不起作用-->
<h1>

li + li {color:red;}

<div> 
    <ul>     
        <li>List item 1</li>  <!--不起作用-->
        <li>List item 2</li>  <!--起作用-->
        <li>List item 3</li>  <!--起作用-->
    </ul> 
     <ol> 
         <li>List item 1</li> <!--不起作用-->
         <li>List item 2</li> <!--起作用-->
         <li>List item 3</li> <!--起作用-->
    </ol> 
</div>

    这个例子中li+li是选择紧挨着li后面的第一个<li>，所以第一个<li>不会被选择；
    而第二个<li>是紧挨着第一个li的，所有会被选择；
    第三个<li>是紧挨着第二个<li>的，也会被选择。

CSS链接样式

 a:link {color:#FF0000;} 	/* 未被访问的链接 */
 a:visited {color:#00FF00;} /* 已被访问的链接 */
 a:hover {color:#FF00FF;} 	/* 鼠标指针移动到链接上 */
 a:active {color:#0000FF;} 	/* 正在被点击的链接 */