css基本知识点

来源：互联网发布：淘宝开学季活动编辑：程序博客网时间：2024/06/05 13:20

CSS和HTML的结合方式

CSS代码理论上位置是任意的，但通常写在style标签里
CSS和HTML的结合方式有3种：

a. 行级样式表:采用style属性,范围只针对此标签适用

<div style = "border:1px solid red ;">大家好</div>

b. 内嵌样式表:采用<style>标签完成。范围针对此页面<style>p{border:1px solid red}</style>
c. 外部样式表: 采用建立样式表文件。针对多个页面.

引入样式表文件的方式:
1):<head></head>里采用<link>标签
eg:<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
2):采用import，必须写在<style>标签中，并且必须是第一句
eg: @import url(a.css) ;

两种引入方式的区别：
外部样式表中不能写<link>标签,但是可以写import语句

CSS选择器两大类:

1.基本选择器
a.标签选择器:指的就是选择器的名字代表html页面上的标签

在<style></style>里写p{
color:red ;
border:1px dashed green;
}

使用：<p>萌萌哒</p>

b.类选择器：规定用圆点.来定义
优点：灵活

eg:在<style></style>里写 .one{background-color:#ff0099; }
使用：<div class="one">萌萌哒</div>
<p class="one">萌萌哒</p>

c. ID选择器：规定用#来定义

eg:在<style></style>写 #one{cursor:hand; }

使用：<h1 id="one">你好</h1>

区别：标签选择器针对的是页面上的一类标签.
类选择器可以供多种标签使用.
ID选择器是值供特定的标签(一个). ID是此标签在此页面上的唯一标识。

d:通用选择器：用*定义,代表页面上的所有标签。

*{
font-size:30px;
margin-left:0px;
margin-top:0px;
}

2.扩展选择器
a. 组合选择器:采用逗号隔开

eg: p,h1,h2,.one,#two{color:red ; }

b. 关联选择器(后代选择器): 采用空格隔开

eg: h4 span i{color:red ; }
表示h4标签中的span标签中的i标签的样式
h4和span和i标签不一定是紧挨着的。

c. 伪类选择器

1) :静态伪类：规定是用:来定义.只有两个.只能用于超链接.

:link表示超链接点击之前的颜色
:visited表示链接点击之后的颜色

eg:a:link{color:red ;}
a:visited{color:yellow;}
注意： a:link{}定义的样式针对所有的写了href属性的超链接(不包括锚)
a{}定义的样式针对所有的超链接(包括锚)

2) :动态伪类 : 针对所有的标签都适用

:hover : 是移动到某个标签上的时候
:focus : 是某个标签获得焦点的时候
:active : 点击某个标签没有放松鼠标时
eg: label:hover{color:#00ff00; }
input:focus{
background-color:#ff9999;
border:1px solid red;
}
a:active{
color:blue;
}

0 0