（１）内嵌样式用于定义某一个标记的样式

（２）内嵌样式在四种样式（内嵌样式、内部样式、外部样式、默认样式）中优先级别最高
<style type="text/css">
   选择器{ 
    属性:属性值;
    ......
    属性:属性值;
　}
</style>
（１）内部样式用于定义某一个网页的样式

（２）内部样式在四种样式（内嵌样式、内部样式、外部样式、默认样式）中优先级别排名仅次于内嵌样式
外部样式引入方式：     
 <link rel="stylesheet" type="text/css" href="样式表源文件地址">
      定义两个超级链接，第一个超链接使用外部样式，定义文字颜色为红色，字体大小为28像素，第二个超链使用默认样式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>样式使用</title>
<link href="3-3.css" type="text/css" rel="stylesheet">
</head>
<body>
  <a href="http://www.baidu.com" id="myCSS">
      百度
  </a><br />
  <a href="http://www.baidu.com">百度</a>
</body>
</html>
#myCSS{
    color:red; 
    font-size:28px;
}

CSS基础_css

 

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>样式使用</title>
</head>

<body>
  <a href="http://www.baidu.com" style="color:red; font-size:28px;">
      百度
  </a><br />
  <a href="http://www.baidu.com">百度</a>
</body>
</html>

CSS基础_html_02

 

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>样式使用</title>
<style>
#myCSS{
    color:red; 
    font-size:28px;
}
</style>
</head>
<body>
  <a href="http://www.baidu.com" id="myCSS">
      百度
  </a><br />
  <a href="http://www.baidu.com">百度</a>
</body>
</html>

CSS基础_html_03

 

 

　　在一个HTML文件中可以引入多个外部样式表，当这些外部样式表都对某一个标记进行了样式定义时，起作用的将是最后引用的外部样式文件中对于该标记的定义。
＠import引入外部样式文件的语法格式如下： 
       ＠import　url(样式表源文件地址)
＠import只能放在<style>标记内使用，而且必须放在其他CSS样式之前。
浏览器会按照不同的方式来确定样式的优先级，其原则如下：
（1）按照样式来源不同，其优先级如下：
内嵌样式>内部样式>外部样式>浏览器默认样式
（2）按照选择器不同，其优先级如下：
id选择器 >class类选择器>元素选择器
（3）当样式定义优先级相同时，取后面定义的样式为最终显示效果样式。
设置元素选择器的基本语法如下：
HTML元素名{ 
　　样式属性：属性值；
　　样式属性：属性值；
　　......
}
类选择器样式定义的语法格式如下所示：
.类选择器名称{
　　样式属性：属性值；
　　样式属性：属性值；
　　......
}
定义ID选择器的语法格式：
#ID选择器名称{
　样式属性：属性值；
　样式属性：属性值；
　......
}
ID选择器的使用语法如下所示：
<标记名称 id="ID选择器名称">
后代选择器定义的语法如下：
祖先选择器 后代选择器{
　样式属性：属性值；
　样式属性：属性值；
　......
}
定义组合选择器的语法如下：
选择器1，选择器2，...，选择器n{
   样式属性：属性值；
   样式属性：属性值；
......
}
父子选择器使用大于号作为选择器的分隔符
语法格式如下所示：
父选择器 > 子选择器 {
      样式属性：属性值；
      样式属性：属性值；
      ......
}
如果需要选择紧接在某一个元素后的元素，并且二者有相同的父元素，可以使用相邻兄弟选择器，相邻选择器使用加号作为选择器的分隔符
语法格式如下所示：
选择器1 + 选择器2 {
      样式属性：属性值；
      样式属性：属性值；
      ......
}
属性选择器是对带有指定属性的HTML元素进行样式设置。
使用CSS属性选择器，可以只选中含有某个属性的HTML元素，或者同时含有某个属性和其对应属性值的HTML元素，并对其进行相关样式设置。
属性选择器定义的语法格式如下：
标记名称[属性选择符] {
　　样式属性：属性值；
　　样式属性：属性值；
　　......
}
通用选择器是所有选择器中最强大的，却是使用最少的。
通用选择器的作用就像是通配符，其匹配所有可用元素。
通用选择器由一个星号表示，一般用来对网页页面上所有元素进行样式设置
语法结构如下：
＊ {
　　样式属性：属性值；
　　样式属性：属性值；
　　......
}
（1）使用 background-color 属性为元素设置背景色。
（2）要把图像放入背景，需要使用 background-image 属性。
（3）设置背景图像的起始位置需要使用background-position属性进行设置
background-repeat 属性的属性值如果是 repeat，则会将背景图像在水平和垂直方向上都平铺，
如果值是repeat-x 和 repeat-y 则将分别使图像只在水平或垂直方向上进行重复；
如果值是no-repeat 则不允许图像在任何方向上进行平铺。
默认地，背景图像将从一个元素的左上角开始。
background-clip 属性规定背景的绘制区域
该属性是CSS3的属性，主要用于背景图像的裁剪区域
基本语法格式是：
background-clip : border-box | padding-box | content-box; 
 border-box是默认值，表示从边框区域向外裁剪背景；
padding-box表示从内边距区域向外裁剪背景；
content-box表示从内容区域向外裁剪背景。
（1）线性渐变
为了创建一个线性渐变，必须至少定义两种颜色结点。
也可以设置一个起点和一个方向（或一个角度）。
其定义的基本语法如下：
background: linear-gradient(direction, color-stop1, color-stop2, ...);
其中direction指明线性渐变的方向，默认是从上到下。
（3）重复的径向渐变
repeating-radial-gradient(shape, start-color, ..., last-color);
shape 参数定义形状，其值可以是 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
设置边框属性的语法格式如下：
　　border : 边框宽度 边框样式 边框颜色
例如：
　　border: 1px solid red;
在CSS3中可以通过border-radius属性为元素增加圆角边框，该属性定义的语法如下：
　　border-radius : 像素值|百分比
在CSS中，列表属性是设置无序列表标记（<ul></ul>）的呈现形式
常用的列表属性有list-style-type、list-style-image、list-style-position以及list-style属性。
list-style-type属性用于设置列表项标记的类型，这个类型主要有：disp、circle、square、none；
list-style-image属性用于设置使用什么图像来作为列表符号
list-style-position属性用来指定列表符号显示的位置，
伪类是一种特殊的类选择符，是能够被支持CSS的浏览器自动识别的特殊选择符
最大的用途是为超级链接定义不同状态下的样式效果。
伪类的语法是在原有的选择符后加一个伪类，其语法格式如下所示：
选择器：伪类｛
　　属性：属性值；
　　属性：属性值；
　　……
｝
CSS的伪元素不是真正的页面元素，即没有对应的HTML元素
但是其所有用法和表现行为与真正的页面元素一样，可以对其使用例如页面元素一样的CSS样式
表面上看上去貌似是页面的某些元素来展现，实际上是CSS样式展现的行为，因此被称为伪元素。
常用的伪元素如下所示：
:before：在某个元素之前插入一些内容；
:after：在某个元素之后插入一些内容；
:first-letter：为某个元素中的文字的首字母或第一个字使用样式；
常用的伪元素如下所示：
:first-line：为某个元素的第一行文字使用样式；
:selection：匹配用户被用户选中或者处于高亮状态的部分；
:placeholder：匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效