CSS高级操作

最新推荐文章于 2024-05-02 13:56:30 发布

运维方便面

最新推荐文章于 2024-05-02 13:56:30 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/kxindouhao5491/article/details/81974829

版权

1. CSS-------层叠样式表(Cascading Style Sheet)

1. 为什么使用CSS？？

美化---使网页更美观，更漂亮！

1. CSS的优势：
  - 内容和表现分离
  - 网页的表现单一，容易修改
  - 丰富的样式，是页面布局更加灵活
  - 减少网页的代码量，增加网页的浏览速度，节省网络带宽
  - 运用独立于页面的CSS，有利于网页被搜索引擎收录
2. CSS语法规则

style标签

网页中引用CSS样式表
1. 行内样式

1. 内部样式表
  - CSS代码写在<head>的<style>标签中
  - 优点

方便在同页面中修改样式

3.缺点

不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底

1. 外部样式表

CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表，有两种方式

链接式

导入式

- - 连接式----建议使用

<link rel=”stylesheet” hery=”样式文件的路径”/>

- - 导入式

<style>

@import “css/types.css”;

</style>

链接式与导入式的区别

1 <link/>标签属于XHTML，@import是属于CSS2.1

2 使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示

3 使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中

4 @import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

CSS样式优先级:

行内样式>内部样式表>外部样式表

就近原则

怎么用：
1. 内部样式表

<style></style>

1. 内联样式

<p style=””></p>

1. 外部样式表

创建一一个外部的CSS文件：*.class ，把样式卸载文件中

谁想用这个样式，谁就引入这个class文件即可

ID选择器 > class类选择器 > 标签选择器的优先级

14. 标签选择器：

选择器写法和标签是一致的，所有的这些标签会使用同一的样式

选择器{

声明1；---------属性: 值

声明2；---------属性: 值

声明1；---------属性: 值

}

实例：

h1{

font-size:12px;

color:#F00; }

15.类选择器：

如果有个别某些h1不想使用这个样式怎么办？—》肯定不能使用h1这个标签选择器。

如果某些段落p也不想使用p1这个样式怎么办？

使用语法：

.red{

color:red;

}

实例：

注意：.red在声明的时候才有点“.” ;在使用的时候没有

ID选择器

作用：让某一元素使用特定的样式。

用法：id=“ ”

#green{

color:#00ff00;

}

补充：

class注释 /**/

颜色：

使用英文单词：red yellow blue green
使用十六进制数字表示 0~9 ABCDEDF

暖色调 冷色调

00 ff 00

RGB=Red Green Blue

CSS的高级选择器：

层次选择器

结构伪类选择器

属性选择器

层次选择器

结构类选择器

小结:

使用E F:nth-child(n)和E F:nth-of-type(n)的关键点

E F:nth-child(n)在父级里从一个元素开始查找，不分类型

E F:nth-of-type(n)在父级里先看类型，再看位置

属性选择器

语法：

E[attr]属性选择器 a[id] { background: yellow; }

E[attr=val]属性选择器 a[id=first] { background: red; }

注意：E[attr=val]属性选择器中，属性和属性值必须完全匹配才能被选中

E[attr*=val]属性选择器 a[class*=links] { background: red; }

E[attr^=val]属性选择器 a[href^=http] { background: red; }

E[attr$=val]属性选择器 a[href$=png] { background: red; }

<iframe>内联框架:

语法：

path--------------------引用页面地址

mainFrame-----------框架标识名

提示：

可以设置src的属性值为http://www.bdqn.cn，在这个页面中也可以打开一个线上的网页。

<iframe>属性（实现页面间的相互跳转）：

在被打开的框架上加name属性：

<iframe name="mainFrame" src="subframe/the_second.html" />

------------有的浏览器需要以</iframe>结尾

在超链接上设置target目标窗口属性为希望显示的框架窗口名：

<a href="subframe/the_second.html " target="mainFrame">下边显示第二页</a>

运维方便面

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS高级操作

1. CSS-------层叠样式表(Cascading Style Sheet) 为什么使用CSS？？美化---使网页更美观，更漂亮！ CSS的优势：内容和表现分离网页的表现单一，容易修改丰富的样式，是页面布局更加灵活减少网页的代码量，增加网页的浏览速度，节省网络带宽运用独立于页面的CSS，有利于网页被搜索引擎收录 ...
复制链接

扫一扫