JavaWeb——CSS_总结

一、 CSS概述

1、CSS是什么? 

* CSS 指层叠样式表

 

样式表:存储样式的地方

层叠: 一层叠一层

2CSS有什么作用?

*CSS就是用来更好地修饰HTML

3、CSS代码规范

选择器名称 属性名:属性值;属性名:属性值;…….}

属性与属性之间用 分号 隔开

属性与属性值直接按用 冒号 连接

如果一个属性有多个值的话,那么多个值用 空格 隔开。例如: border:5px solid red;

注释:/* 注释内容*/

二、CSS选择器

 

*CSS选择器:指定了CSS样式作用于哪个HTML标签上

 

 

1、元素选择器

*就是把HTML标签名作为选择器名称

*格式: 标签名 {}

2类选择器

*样式格式:  .class{}

*标签格式: <p class=”class”></p>

  • *能设置不同标签的相同样式
如果想将一组元素设定为相同的样式,可为它们设置相同的class属性值,再通过CSS类选择器指定相同的样式

3、Id选择器

*样式格式:  #id{}

*标签格式:<p id=”id”></p>

  • *有针对性地设置样式

 

4、属性选择器

*根据标签名和标签的属性名以及属性值来选择

*样式格式:标签名[属性名称=属性值]

 

 

5伪元素选择器

*HTML预定义的选择器

*格式:标签名:选择器{}

*选择器名称为 HTML标签的状态。例如:a:link{}表示链接标签在未访问过 时的样式。

 

三、HTMLCSS的结合方式

*CSS必须结合HTML来用。

*4种使用方式

1、style属性方式(内联样式)

*适合局部修改

*<font style="font-size:150px;color: red;">今天天气好晴朗</font>

 

2、style标签方式:(内嵌样式)

*<style></style> 存在于head标签之中的

*例如:<style type="text/css">

font {

font-size:150px;color: red;

}

</style>

*页面的多个标签统一设置。

 

3、导入方式(外部样式中使用较少)

*格式:@import url("CSS文件路径");

*存在于<style>标签中

 

4、链接方式(外部样式最常用的方式)

*格式:<link rel="stylesheet" type="text/css" href="CSS文件路径"/>

*存在于<head>标签中

 <link> 标签定义文档与外部资源的关系。

<link> 标签最常见的用途是链接样式表。

 

 

 

外部样式好处:

提升了代码的复用性,更加易于维护,从而极大提高工作效率

 

样式优先级:

内联样式》》内嵌样式==外部样式(链接方式)(就近原则)

1、 如果加入导入方式  会有截断CSS代码的风险

2、   !important

 

链接方式和导入方式区别:

1、链接方式引用的CSS会被同时加载。而导入方式引入的CSS在页面全部加载完以后才会加载,在网速较慢时会出现网页没有样式的情况。(导入方式硬伤)

2、链接方式支持JavaScript修改样式,而导入方式不支持(导入方式硬伤)

3、链接方式可以引入样式也可以做其他事情。而导入方式只能引CSS

4、链接方式导入的CSS任何浏览器都OK,而导入方式要求浏览器版本必须在IE5以上

建议使用链接方式

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值