07CSS--css的位置及css中的选择器

最新推荐文章于 2021-12-08 20:07:14 发布

sunberryL

最新推荐文章于 2021-12-08 20:07:14 发布

阅读量117

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/sunberryL/article/details/88971939

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

css书写位置

内部样式表

<head>
<style type="text/CSS">
    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>

行内式（内联样式）

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

外部样式表（外链式）

<head>
  <link type="text/css" href="CSS文件的路径"  rel="stylesheet" />
</head>

三种样式表总结

选择器

1、标签选择器（元素选择器）

eg:
h1{color:red;
font-size:200px;
}

2、类选择器

<head>
.lei{
background-color:red;
font-size:20px;
}
</head>
<body>
<div class="lei">
</div>
</body>

注：不建议使用_来为CSS选择器命名；不要纯数字、中文等命名，尽量使用英文字母来表示。

多类名选择器：

<div class="pink fontWeight font20">亚瑟</div>
注：渲染是哪个类选择器在css中写在前面，则哪个选择器在调用时先使用。

3、id选择器

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

#zhaojie{
color：red；}

<div id="zhaojie"></div>

注：id选择器和类选择器的区别
W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
类选择器（class）好比人的名字，是可以多次重复使用的。
id选择器好比人的身份证号码，全中国是唯一的，不得重复，只能使用一次。

4、通配符选择器

通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

这个css样式就是清除HTML标记的所有默认边距,使得页面中的边距都为0；

CSS复合选择器：复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

5、交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格

p.one{
color:red;}

这样选择的是页面中类名为.one中的p标签中的内容

6、并集选择器

并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

eg:
.one,h1,#test{
color:green;
}
表示.one,h1,#test这三个选择器都会执行颜色为红色，通常用于集体声明。

7、后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

.class h3{
color:red;
}

类名为class中的h3标签为红色

8、子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个进行连接，注意，符号左右两侧各保留一个空格。

.demo > h3 {color: red;}  
 说明  h3 一定是demo 亲儿子。  demo 元素包含着h3。

9、伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果

伪类选择器：以：开头
类   .one
伪类   ：link
- :link      /* 未访问的链接 */
- :visited   /* 已访问的链接 */
- :hover     /* 鼠标移动到链接上 */
- :active    /* 选定的链接 */


eg:
<style>
a:link{color:#333;
font-size:25px;
text-decoration:none;
}
a:hover{
	color:red;
	font-size:25px;
	text-decoration:none;
}

a:active{
	color:#00F;
}
a:visited{
	color:#999;
}
</style>
</head>

<body>
	<a href="http://www.baidu.com">百度</a>
</body>
</html>