css的介绍

最新推荐文章于 2024-10-01 23:54:35 发布

原创最新推荐文章于 2024-10-01 23:54:35 发布 · 192 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css简介 #css基础

一、css的简介

1、什么是css

层叠样式表，css是对html进行样式修饰的语言

层叠：就是层层覆盖叠加，如果不同的css样式对同一个html标签进行修饰，样式有冲突的部分应用优先级高的，不冲突的部分就共同作用

样式表：就是css属性样式的集合

2、css的作用

（1）修饰html的,使其html样式更加好看

（2）提高样式代码的复用性

（3）html的内容与样式相分离，便于后期维护

3、css的引入方式和书写规范

（1）内嵌样式

内嵌样式是把css的代码嵌入到html标签中

语法：

（1）使用style属性将样式嵌入到html标签中

（2）属性的写法：属性：属性值

（3）多个属性之间使用分号“；”隔开

不建议使用

（2）内部样式

在head标签中使用style标签进行css的引入

div{color:red;font-size:100px}

</style>

语法：

（1）使用style标签进行css的引入

属性：type:告知浏览器使用css解析器去解析

（2）属性的写法：属性：属性值

（3）多个属性之间使用分号“；”隔开

（3）外部样式

将css样式抽取成一个单独的css文件，谁去使用谁就引用

语法：

（1）创建css文件，将css属性写在css文件中

（2）在head中使用link标签进行引入

rel:代表要引入的文件与html的关系

type:告知浏览器使用css解析器去解析

href:css文件的地址

（3）属性的写法：属性：属性值

（4）多个属性之间使用分号“；”隔开

（4）@import方式

@import url("css地址")

</style>

link与@import方式的区别：

（1）link所以浏览器都支持 import部分低版本ie不支持

（2）import方式是等待html加载完毕之后在加载

（3）import方式不支持js的动态修改

二、css选择器

1、基本选择器

（1）元素选择器

语法：html标签名{css属性}

示例：

<span>hello css!!!</span>

span{color：red;font-size:100px;}

</style>

(2)id选择器 id唯一性

语法：#id的值{css属性}

示例：

<div id="div1">hello css1!!!</div>

<div id="div2">hello css2!!!</div>

<style>

#div1{background-color:red}

#div2{background-color:pink}

</style>

(3)class选择器

语法：.class的值{css属性}

示例：

.style1{background-color:red}

.style2{background-color:pink}

</style>

***选择器的优先级：id>class>元素

2、属性选择器

语法：基本选择器[属性=‘属性值’]{css属性}

示例：<form action="">

name:<input type=""text/><br/>

pass:<input type="password"/><br/>

</form>

input[type='text']{background-color:yellow}

input[type=‘password’]{background-color:pink}

</style>

3、伪元素选择器

a标签的伪元素选择器

语法：静止状态 a:link{css属性}

悬浮状态 a:hover{css属性}

触发状态 a:active{css属性}

完成状态 a:visited{css属性}

示例：

a:link{color:bule}

a:hover{color:red}

a:activity{color:yellow}

a:visited{color:green}

</style>

4、层级选择器

语法：父级选择器子级选择器......

示例：<div id=""d1>

</div>

</div>

</div>

</div>

#d1.dd2 span{color:red}

</style>

三、css属性

1、文字属性

font-size:大小

font-family:字体类型

2、文本属性

color：颜色

text-decoration:下划线

属性值：none underline

text-align:对齐方式

属性值：left center right

<div>hello css!!!</div>

<a href="#">click me!!!</a>

div{color:red;text-decoration:underline;text-align:right}

a{text-decoration:none}

</style>

3、背景属性

background-color：背景颜色

background-image：背景图片

属性值：url("图片地址")

background-repeat：平铺方式

属性值：默认横向纵向平铺

repeat：横向纵向平铺

no-repeat：不平铺

repeat-y:纵向

repeat-x:横向

                 body{
    background-color: black;
            background-image: url("images/dog.gif");
    background-repeat: repeat-y;

}

4、列表属性

list-style-type:列表项前的小标志

属性值：太多了

list-style-image:列表项前的小图片

属性值：url("图片地址");

<ul>

</ul>

/*ui{list-style-type:decimal-leading-zero;}*/

ul{list-style-type:url("images/forward.gif");}

</style>

5、尺寸属性

width：宽度

height:高度

#d1{background-color:red;width:200px;height:200px}

#d2{background-color:pink;width:200px;height:200px}

</style>

6、显示属性

display：

属性值：none:隐藏

block:块级显示

inline:行级显示

name:<input id="name" type="text"/><span id="span">对不起，输入不符合</span>

<br/>

pass:<input id="pass" type="password">

<br/>

</form>

span{color:red;display:none}

</style>

document.getElementById("btn").onclick=function(){

document.getElemengtById("span").style.display="inline";

}

</script>

7、浮动属性

float：

属性值：left right

clear:清除浮动left right both

缺点：（1）影响相邻元素不能正常显示

（2）影响父元素不能正常显示

四、css盒子模型

border:

border-width:边框的宽度

border-color：边框的颜色

border-style:边框的线型

border-top:上边框

border-bottom：下边框

border-left:左边框

border-right：有边框

padding:

代表边框内壁与内部元素之间的距离

padding：10px;代表上下左右都是10px

padding:1px 2px 3px 4px;上右下左

padding：1px 2px;上下/左右

padding：1px 2px 3px

padding-top:单独设置

margin：

代表边框外壁与其它元素之间的距离

margin：10px；代表上下左右都是10px

                          margin:1px 2px 3px 4px;上右下左
            margin:1px 2px;上下/左右
            margin:1px 2px 3px;
            margin-top:单独设置