第三次网页前端培训笔记(CSS)

一、CSSS概述

CSS层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

CSS 目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统 HTML 的表现而言, css 能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。 cSs 能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。

CSs 是用来美化网页用的,没有网页则 csS 毫无用处,所以 CsS 需要依赖 HTML 展示其功能。

二、CSS的基本使用

2.1 CSS的定义:
                    选择器名 {
                        属性名:属性值;
                        属性名:属性值;
                        ...
                    }
                    注意点:
                        1.声明需要使用{}括起来
                        2.一行建议一个声明
                        3.如果样式的属性值有多个单词组成呢,则用引号引起来

2.2 CSS的注释
                    /*注释内容*/

2.3 CSS的三种使用方式:
                    1.行内样式:直接写在标签上的样式,在标签上通过style属性定义的样式
                    2.内部样式:定义在style标签中的样式,style标签一般设置在head标签中
                    3.外部样式:定义在外部的css文件中,通过link标签引入
                               <link rel="stylesheet" type="text/css" href="css文件的路径" />
                    注:当有多重样式时,越精准越优先(就近原则)

三、基本选择器

3.1 通用选择器   *

* {

属性名:属性值;

...

}

3.2 元素选择器

元素名/标签名 {

属性名:属性值;

.....

}

3.3 id选择器   #

#id属性值 {

属性名:属性值;

....

}

3.4 类选择器

.class属性值 {

属性名:属性值;

....

}

3.5 分组选择器

选择器1,选择器2,选择器3...{

属性名:属性值;

....

}

3.6 CSS样式的优先级

根据选择器的精确度/权重来决定的,常见的权重如下,权重越大,优先级越高

元素选择器  1

类选择器  10

id选择器  100

内联样式  1000

四、组合选择器

4.1 后代选择器

选择指定元素的所有制定后代元素,以空格隔开

选择器  指定元素 {

属性名:属性值;

....

}

4.2 子代选择器

选择指定元素的第一代子元素,以大于号>隔开

选择器>指定元素 {

属性名:属性值;

....

}

4.3 相邻兄弟选择器

选择指定元素的下一个指定元素(只会找一个),两者都相同的父元素,以加号+隔开

选择器+指定元素{

属性名:属性值;

....

}

4.4 普通兄弟选择器

选择指定元素后面的所有指定元素,两者都相同的父元素,以波浪号~隔开

选择器~指定元素{

属性名:属性值;

....

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值