css选择器

概述CSS（Cascading Style Sheets--层叠样式表）

CSS辅助HTML写页面

Paste_Image.png

语法

<style type="text/css">
选择器{
   属性：值；
}
</style>

CSS语法

CSS与HTML的结合方式（掌握）

1.行级样式表，可以写在开始标签里面，采用style属性完成
例如：<p style = color:red></p>

2.内部样式表（在title和head间写style；在body中引用），采用style标签完成(表明它是css代码)
<style type="text/css">  //type表明这是文本类型的css代码
选择器{
   属性：值；
}
</style>

3.外部样式表：采用外部css文件完成
使用<link></link>标签来引进外部css文件
属性：
rel = "stylesgeet"   必须写
href = "a.css" (相对路径)
  <link rel = "stylesheet" href = "a.css"></link>
  <title>Document</title>

CSS的基本选择器

基本选择器
a.标签选择器：选择了页面上一类标签
b.类选择器：规定用圆点来定义（当对页面上不同种的标签想使用相同 的属性的时候）

在style标签中用 .类名{属性}
例如
.one{
  border:1px solid red;  //solid实线
}

在body的行级标签中进行引用
<p  class = ".one">你好</p>

c.ID选择器：用#来定义，针对特定的一个标签用（id具有唯一性）

在style标签中用 .ID名{属性}
例如
#two{
  border:3px dashed green;  //dashed表示虚线
}

在body的行级标签中进行引用
<p  id = "two">你好</p>

d.通用选择器：用*来定义，代表页面上所有标签

在style标签中用 *{属性}
例如
*{
  border:3px dashed green;  //dashed表示虚线
}

CSS的扩展选择器

a.组合选择器：用逗号隔开多个选择器
标签，标签，标签，#one，.two...{属性；}

b.关联选择器：（后代选择器）：用空格隔开
例如 h3 i{
  color:red;
}
<h3>我来自<i>中国</i>大陆</h3>
<i>香港</i>
此时只有"中国"会有斜体红色效果，"香港"只有斜体效果

c.伪类选择器
1）：静态伪类    ：link， ：visited,只能用于超链接
---
style中写：
a:link{
    color:red;
}
a:visited{
    color:green;
}
body中写：
<a href = "  ">一个网站</a>
效果是：点击前链接为红色，点击后链接为绿色
---

2） 动态伪类：适用于各种标签
    ：focus：控件获得焦点
    ：active 点击控件的时候
    ：hover  当鼠标移动到某个控件上方的时候（比如表格  ，例如定义cursor = hand，当鼠标放在表格上时鼠标变成手的形状）

例如（style中）：
input:focus{
            border:5px solid red;
            background-color:#0000FF
        }
body中：<input type = "text" name = "">
效果：点击文本框的时候文本框属性会发生改变

表格(在body中创建一个表格table)

table{
  width = 300px;
  height = 300px;
  border:1px solid red;
}
table td{
  border:1px solid red
}

table

此时可以使用属性：
border-collapse:collapse;来将双线变单线

Paste_Image.png

table tr:hover{
        background-color:yellow;
    }

quanli.gif

a{ } 与 a:link{ }的区别：
a{}包括了锚点；a:link{}不包括锚点