css基础整理（1）之css导入和选择器

时间 2019-11-26

标签 css 基础整理导入选择器栏目 CSS 繁體版

原文原文链接

最近一直在学JS，但老是以为有些吃力，因此想把CSS和html的基础知识再整理一下，如今先复习一下ＣＳＳ的导入，相对单位来常见的和选择器中常见的。
css

CSS的的外部样式表导入的两种方法：html

１）使用<link>标签导入浏览器

<link href="001.css" type="text/css"/>

href能够是相对地址也能够是绝对地址；ide

２）使用＠import关键字导入url

<style type="text/css">
@import url("001.css");
</style>

css中的相对单位：spa

em:一个em等于font-size的属性值，若是设置font-zize属性的单位为em,则em的值将根据父元素的font-size值来肯定；如code

p{
font-size:12px;
line-height:2em;//行高为24px
}

px:通常参考父对象中相同属性的值；若是父元素高为500，子元素为50%，则子元素的实际高度为250 px;orm

基本选择器：htm

1）标签选择器：标签名{ 属性：属性值 }
对象

p{font-size:12px;
color:red;}

2 )类选择器：.类名{ 属性：属性值 }

<style type="text/css">
.size{font-size:14px;}
</style>
<body>
<div class="size">世界，你好！</div>
<p class="size">你好！</p>
</body>

它能够精准到某个具体的元素对象；

3）ID选择器；#box{ 属性：属性值}

<style type="text/css">
#box{height:200px;width:200px;}
</style>
<div id="box">四月裂帛</div>

div#box的优先级>#box 的优先级

4）通配选择器:*{ magin:0;padding=0;}

通配选择器能够影响到页面中全部的元素，通常都用来，清楚页面的原有格式，使他兼容各浏览器；

复合选择器：

1）子选择器：指定父元素所包含的子元素的样式：用>表示，如

<style type="text/css">
#box>.yangshi{
    height:200px;width:200px;
    }
 </style>
 <body>
 <div id="box"><span class="yangshi">世界这么大，我想去看看</div>
 </body

2)相邻选择器：指定一个元素相邻的下一个元素的样式，用+表示，如

<style type="text/css">
h2{font-size:12px;}
h2+div{font-size:20px;}//为div元素指定样式
</style>
<body>
<h2>结构</h2>
<div>春眠不觉晓</div>
</body>

3）包含选择器：经过空格表示符来表示，如

<style type="text/css">
#header p{};
</style>
<body>
<div id="header>
<p></p>
<p></p>
<p></p>
</div>
</body>

#header p{}定义了header中全部p元素的样式；

4）伪选择器：伪类和伪元素以（：）为前缀表示，而且与先后名称之间不要有空格；

下面是利用超连接的4个伪类选择器定义超连接文本的4中不一样显示状态：

<style type="text/css">
a:link{color:#ff0000;}
a:visited{color:#0000FF;}
a:hover{color：00ff00;}
a:active{color:ff00ff;}
</style>
<body>
<a href="#">超连接文本</a>
</body>

5)选择器分组：把样式相同的元素写在一块儿，定义样式，如

html，body，h1,h2,h3,h4,h5,p,table,caption,tr,td,th,ul,li,ol,di,dl,dt,dd,form,legend,fidest
{
margin:0;
padding:0;
    }

这样能够把全部元素的样式清楚为0；除了能够对标签元素进行分组，还能够给类选择器和ID选择器进行分组，用，隔开；

1. CSS基础（1.选择器）
2. css基础,css选择器
3. CSS基础和选择器
4. css的导入方式基础选择器高级选择器
5. CSS基础选择器温故-1
6. CSS学习之基础选择器和高级选择器
7. css基础选择器
8. CSS基础（三）：选择器
9. CSS基础选择器
10. HTML基础-css选择器
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• Java Agent入门实战（三）-JVM Attach原理与使用
• Docker 清理命令