(1)内嵌样式用于定义某一个标记的样式

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

(2)内部样式在四种样式(内嵌样式、内部样式、外部样式、默认样式)中优先级别排名仅次于内嵌样式
外部样式引入方式:     
 <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;
}

 

 

<!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>

 

 

<!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>

 

 

  在一个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属性时,该伪元素才能生效