CSS笔记

来源：互联网发布：c编程思想pdf 编辑：程序博客网时间：2024/05/29 17:08

一、css简介

1、css是什么

官方给出的定义为：层叠样式表，换句话说，css是对html进行样式修饰的语言

2、css的作用

(1)修饰html，使得html的样式更加好看

(2)提高样式代码的重用性

(3)将html的内容与样式分离，使其不相耦合，有利于代码的维护与修改

3、css的引入方式

(1)通过直接内嵌的方式引入

例如：<div style="color: gray;front-size:10px">内嵌引入</div>

直接在html代码中运用style属性引入css到html中，多个样式之间用";"隔开，这样引入的确定是代码与样式之间相耦合，不利于代码的维护

(2)通过<style></style>标签引入

①其中的type是告诉浏览器使用css的解析器进行解析

②属性写法：属性：属性值，多个属性之间用";"隔开

(3)通过<link>标签从外部引入css文件

其中，rel代表引入的文件与html的关系，type是告诉浏览器使用css的解析器进行解析，href代表css文件的相对路径或绝对路径

(4)通过@import方式引入

写法：<style type="text/css">

@import url("css文件的地址");

</style>

@import方式一般是不用的，因为它不支持js的动态修改，切部分低版本的浏览器不支持它

二、css选择器

1、基本选择器

(1)标签选择器

格式：html的标签名+{css的属性}

比如：

<style type="text/css">                    div{color:red;font-size:50px}               </style>

(2)id选择器

格式：#id的值+{css属性}

示例：

<style type="text/css">       #div1{background-color: orange}       #div2{background-color: gray}</style><body>       <div id="div1">实例一</div>       <div id="div2">实例二</div></body>

(3)类选择器

格式：.+class的值+{css的属性}

示例：

<style type="text/css">       .class1{             background-color: pink;       }       .class2{             background-color: gray;       }</style><body>       <div class="class1">实例三</div>       <div class="class1">实例四</div>       <div class="class2">实例五</div></body>

(4)选择器的优先级

id选择器>类选择器>标签选择器

2、属性选择器

格式：基本选择器[属性='属性值']{css属性}

示例：

<style type="text/css">       input[type="text"]{background-color: pink}</style><body>       <form action="">             姓名:<input type="text"/><br/>       </form></body>

3、伪元素选择器

<a>标签的伪元素选择器

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

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

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

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

示例：

<style type="text/css">       a:link{color: pink}       a:hover{color: orange}       a:active{color: blue}       a:visited{color: red}</style><body>       <a href="#">点击此处</a></body>

4、层级选择器

格式：父级选择器+" "+子级选择器....

示例：

<style type="text/css">       #div1 .d2 span{color:orange}</style><body>       <div id="div1">                    <div class="d1">                    <span>层级选择器1</span>             </div>             <div class="d2">                    <span>层级选择器2</span>             </div>              </div>       <div id="div2">                    <div class="d1">                    <span>层级选择器3</span>             </div>             <div class="d2">                    <span>层级选择器4</span>             </div>              </div></body>

三、css属性

1、文字属性

①font-size：文字大小

②font-famliy：文字类型

2、文本属性

①color：颜色

②text-decoration：下划线 a标签默认有下划线

属性值：none 无下划线 underline 有下划线

③text-align：对齐方式

属性值：center left right

3、背景属性

①background-color：背景颜色

②background-image：背景图片

属性值：url("图片的所在路径")

③background-repeat：平铺方式

属性值：默认横向纵向平铺，其有以下几个属性值

repeat：横向纵向平铺

no-repeat：不平铺

repeat-y：纵向平铺

repeat-x：横向平铺

4、列表属性

①list-style-type：列表项前的标志

②list-style-image：在列表项前加入图片

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

5、尺寸属性

①width：宽度

②height：高度

6、显示属性

①diaplay：

属性值： none 隐藏

block 块级显示

inline 行级显示

7、浮动属性

①float

属性值：left 左浮 right 右浮

clear：清除浮动取值：left right both

float属性有个缺点就是它会影响相邻的没有浮动的元素以及父元素不能正常显示

四、css盒模型

1、border 盒子的边框

border-width：边框宽度

border-color：边框颜色

border-style：边框的类型

border-top：上边框

border-bottom：下边框

border-left：左边框

border-right：右边框

2、margin 边框外壁与其他元素之间的距离

margin ：10px ; 将上下左右都设置为10像素

margin ：10px 20px 30px 40px; 依次按照上右下左的顺序设置距离

margin ：10px 20px; 上下为10px，左右为20px

margin ：10px 20px 30px; 上为10px，右为20px下为30px左为20px

3、padding 边框内壁与内部元素之间的距离

padding：10px ; 将上下左右都设置为10像素

padding：10px 20px 30px 40px; 依次按照上右下左的顺序设置距离

padding：10px 20px; 上下为10px，左右为20px

padding：10px 20px 30px; 上为10px，右为20px下为30px左为20px

阅读全文

0 0