初识Web 之 CSS 基础 （ 一 ）

一，CSS的主要了解内容

   CSS 语法由三部分构成：选择器、属性和值：

selector {property: value}

body {color: blue}

选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性 (property) 是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）：

      1.选择器

      2.css常用属性介绍

      3.div + css  重点

1.什么是CSS

层叠样式表（CSS）是描述标记语言页面格式的标准（或语言），CSS 使开发人员能够分离内容和可视元素，以实现更好的页面控制和灵活性 CSS 文件通常通过 HTML 文件中的链接附加到 HTML 文件。

2.学习 div + css 优点

a、能够使代码bai精简，使用div+css布局使代码很是精简

b、提升了网页访问速度，div+css布局较传统的Table布局比较，减少了许多代码，其浏览访问速度自然得以提升，从而提升了网站的用户体验度。

c、a有利于优化。采用div-css布局的网站对于搜索引擎很是友好，简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取b。

d、浏览器兼容性 。DIV+CSS更容易出现多种浏览器不兼容的问题，主要原因是不同的浏览器对web标准默认值不同。

e、需要注意的是，网页不喜欢一个页面有太多的css代码，否则同样会影响蜘蛛的爬行，影响搜索引擎的收录，所以采用外部调用的方式调用CSS是非常不错的方法。

f、若非必须太多花哨的网站，采用CSS布局，同样可以到达所想要的效果。如网站导航中的文字颜色变化、css下拉菜单等。

4.什么是选择器，为什么要学选择器
   CSS选择器用于选择你想要的元素的样式的模式。

   对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。

   HTML页面中的元素就是通过CSS选择器进行控制的

5. 选择器

这里有个小分类

                        基本选择器    标签选择器    类选择器    Id选择器

                        复合选择器     后代选择器   并集选择器    全局选择器

这六种选择器使用情况比较多，后代选择器在大型

a.  类选择器    前面以”.”来标志

<style type="text/css">
   .demoDiv{
color:#FF0000;
}
</style>

<div class="demoDiv">
<p class="demoDiv">

       .的位置是选中，然后设置属性与属性值

         <div>,<p>中是定义class的位置

b. 标签选择器     

      决定哪些标签采用相应的CSS样式

<style type="text/css">
   p{
        color: blue;
    }
</style>

<p class="test">齐天大圣</p>

标签选择器的话  直接

<style type="text/css">
  p{
      color： red；
   }
</style>

<p class="test">
			齐天大圣
		啦啦啦
		</p>

使用标签名定位就行  eg： p{}  span{}

c.   Id选择器

       根据元素ID来选择元素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次

<style type="text/css">
  #teste{
			color: brown;
		}
</style>

<div id = "teste">
	啦啦啦
</div>

这里给三个基本选择器的一个运行情况，这里是整个代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		h3{
			color: yellow;
		}
		.test{
			color: green;
		}
		#teste{
			color: brown;
		}
		</style>
	</head>
	<body>
		
		<div id = "teste">
			Id选择器
		</div>
		<p class="test">
			类选择器
		</p>
		<h3  >
			标签选择器
		</h3>
	</body>
</html>

根据不同选择器的选择一一表明了我们期待的颜色与选择标签

这里三个基本标签就免不了遇到优先级问题

你也可以一一测试 他们优先级情况   Id>类选择器>标签选择器>默认样式

默认样式就是黑白体的系统默认情况

d.  后代选择器

也称为包含选择器，用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。后代选择器中的元素不仅仅只能有两个，对于多层祖先后代关系，可以有多个空格加以分开，如id为a、b、c的三个元素，则后代选择器可以写成#a #b #c{}的形式，只要对祖先元素的选择在后代元素之前、中间以空格分开即可。

<style>
.father.child{
color:#0000CC;
}
</style>

<p class="father">
     黑色
    <label class="child">蓝色
    <b>也是蓝色</b>
    </label>
</p>

e. 交集 ， 并集选择器 

简单说就是令代码结构更加简洁，可以一起修改的属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>高级选择器</title>
    <style>
        /*交集选择器*/
        /*既是P标签，类名称text的元素字体变为红色*/
        p.text{
            color: red;
        }
        /*并集选择器*/
        /*让container下的所有元素内容为蓝色*/
        #container p,span,em,strong{
            color: blue;
        }
    </style>
</head>
<body>
    <!--交集选择器-多个选择器包含的元素-->
    <p>好好学习1</p>
    <p class="text">好好学习2</p>
    <p class="text">好好学习3</p>
    <p>好好学习4</p>
 
    <!--并集选择器-多个选择所有匹配的元素-->
    <div id="container">
        <p>好好学习1</p>
        <span>好好学习2</span><br>
        <em>好好学习3</em><br>
        <strong>好好学习4</strong>
    </div>
 
</body>
</html>

 

f .  全局选择器  把所有html表签的默认样式设置到初始样式

设置所有标签使用同一样式，用*表示。如：*{margin：0；padding：0}

通配符选择器 一般在开发中将其设置在public.css文件中 *{margin:0 0;} 一般用来重置样式

这里还有其他一些选择器，就不做具体介绍了

g.  子选择器

子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择

h. 伪类选择器

有时候还会需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停等。这时候我们就需要用到伪类了

i. 相邻同胞选择器

我们可能还希望找到兄弟两个当中的一个，如一个标题h1元素后面紧跟了两个段落p元素，我们想定位第一个段落p元素，对它应用样式。我们就可以使用相邻同胞选择器

CSS
h1 + p {color:blue}
HTML
<h1>brother</h1>
<p>brother</p>

当然选择器肯定不是只有这些，这些是使用情况比较广泛的几种，如果遇到其他情况可以去文档里面寻找，或者百度搜寻

 

6.style标签 与style属性  style属性值

正如上面css优点里面写的内部代码会加重搜索器的效率 ，所以我们更加提倡使用外部css代码

1.创建一个css文件，建立外部样式表

.css

#parent span,h4{
				color: rgb(200,25,23);
			}
			#parent li{
				color: #008000;
			}
			.testes{
				color: yellow;
			}

这里是css里面具体情况，不要将 style 样式也写入那样会报错的哦

那现在的情况就是在html里面如何访问外部数据了

CSS引入到html中有以下三种方法：1- 内联、2-内部样式表、3-外部样式表

内联

  <body style="background-color: gray">      
    在标签内style=" "       

内部样式表

   <style type="text/css"> 
    p {color:red;} <!--内部样式表-->
    </style>        
    用style标签，将要进行css控制的属性放在标签内       

外部样式表  （两种）

 <link rel="stylesheet" type="text/css" href="mystyle.css">       
   在head标签内，并且用link标签来引入你要加载的css文件     

<style type="text/css">  
@import url(wcss.css);   /*这里是通过@import引用CSS的样式内容*/ 
</style> 

url就是href  的路径，两种引用外部样式表的情况

优先级：靠近优先  层叠情况   相当于一层层叠加，后运行的会将前面的覆盖掉，所以是靠近优先