CSS
-
CSS的基础
-
CSS定义
? CSS全称为Cascading Style Sheet,中文翻译为“层叠样式表”。
-
CSS的作用
? 简单地来讲,CSS 能对你制作的网页进行布局、颜色、背景、宽度、高度、字体进行控制,让网页按您的美工设计布局的更加美观漂亮。 样式是用来控制页面外观、设置元素对象属性的工具,使用样式可使页面产生各种特殊的效果。
-
CSS的语法
- 基本格式:
<head> <meta charset="UTF-8"> <title>DOC</title> <style type="text/css"> /*样式表内容*/ </style> </head>
- 基本格式:
-
-
样式代码存在的位置
- 直接写在标签内
<p style="color: red"> 你好.... </p>
- 在head标签内写在style标签内
<head> <meta charset="UTF-8"> <title>DOC</title> <style type="text/css"> /*样式表内容*/ </style> </head> <body> <!--body内容--> </body>
- 写在独立的CSS文件中,通过link标签引入
<head> <link rel="stylesheet" href="css文件路径"> </head>
- 直接写在标签内
-
CSS选择器(定义如何在HTML中找标签)
1. 基本选择器
- ID选择器
- 作用:通过标签id选择标签
<style> #ID {属性名: 属性} </style>
- 特点:
1、一个 ID 选择器在一个页面只能使用一次。如果使用2次或者2次以上,不符合 w3c 规范,JS 调用会出问题。
2、一个标签只能使用一个 ID 选择器。
3.一个标签可以同时使用类选择器和 ID 选择器。
- 元素选择器
- 作用:通过标签类型选择标签
<style> 标签名 {属性名: 属性} </style>
- 类选择器
- 作用:通过定义class属性选择标签
<style> .class {属性名:属性} </style> 或者 <style> 标签类型.class {属性名:属性} </style>
- PS:
1、谁调用,谁生效。
2、一个标签可以调用多个类选择器。多个标签可以调用同一个类选择器。
- 类选择器命名规则
- 不能用纯数字或者数字开头来定义类名;
- 不能使用特殊符号或者特殊符号开头(_ 除外)来定义类名;
- 不建议使用汉字来定义类名;
- 不推荐使用属性或者属性的值来定义类名。
- 类选择器常用的命名
- 通配符选择器
- 格式:
× {属性名: 属性值}
- 作用:匹配所以类型的元素
- 格式:
2.组合选择器
- 定义:两个或者两个以上的的基础选择器通过不同方式连接在一起
- 交集选择器
- 格式:
标签类(ID)选择器 {属性: 属性值;}
- 特点:既要满足使用某个标签,还要满足使用了类选择器或者ID选择器。
例子: <head> <style> div.box{ color: red; } div#d1{ width: 400px; height: 300px; backgroud-color: red; } </style> </head>
- 格式:
- 后代选择器
- 格式:
选择器 选择器 {属性: 属性值;}
- 使用条件:
- 后代选择器首选选择器要满足包含(嵌套)关系;
- 父级元素在前面,子集元素在后面。
- 特点:无限制隔代。(多层嵌套全部生效)
<head> <style> div span{ font-size: 42px; } .box span{ color: red; } </style> </head> <body> <div> <p class="box"> <span>我是div标签的孙子级的标签</span> </p> </div> <div><span>我是div标签的子级标签</span></div> </body>
PS:只要是标签选择器,ID选择器,类选择器就可以自由组合
- 格式:
- 子代选择器
- 格式:
选择器>选择器 {属性: 属性值}
- 原则:只会选中子集的元素,下下级的元素不会选中
<head> <style> div>span{ font-size: 42px; } </style> </head> <body> <div> <span>选中我</span> <p> <span>选不中我</span> </p> </div> </body>
- 格式:
- 毗邻选择器
- 格式:
选择器1+选择器2{属性: 属性值}
- 作用:选择所以紧接着选择器1之后的选择器2元素
<head> <style> div+span{ font-size: 42px } </style> </head> <body> <div> <span>不能找到我</span> </div> <span>可以找到我</span> <span>不可以找到我</span> </body>
- 格式:
- 后续选择器
- 格式:
选择器1~选择器2{属性: 属性值}
- 作用:选中选择器1后的所有选择器2的元素
<head> <style> div~span{ font-size: 42px } </style> </head> <body> <div> <span>不能找到我</span> </div> <span>可以找到我</span> <span>可以找到我</span> </body>
- 格式:
- 并集选择器
- 格式:
选择器, 选择器, 选择器{属性: 属性值;}
- 原则:并集选择器应用于多个选择器找到的标签应用相同的样式时,为了避免重复写到一起
<head> <style> .a,#d1,div,h2{ font-size: 24px color: #ffffff } </style> </head>
- 格式:
- PS:
×
为通配符选择器,也就是可以选中所有元素
3.属性选择器
<!-- 通过属性或者属性值找到标签 --> <style> div[属性] {color: red} or div[属性=属性值] {color: red} </style>
- PS:不常用的属性选择器:
<head> <style> /*找到所有title属性以hello开头的元素*/ [title^="hello"] { color: red; } /*找到所有title属性以hello结尾的元素*/ [title$="hello"] { color: yellow; } /*找到所有title属性中包含(字符串包含)hello的元素*/ [title*="hello"] { color: red; } /*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素:*/ [title~="hello"] { color: green; } </style> </head>
4.伪类选择器
- ID选择器
- 状态:同一个标签在不同时刻会有不同状态
/*未访问的链接*/ a:link { color: red; } /*已经访问的链接*/ a:visited { color: blue; } /*鼠标移动到链接上*/ a:hover { color: #FF00FF; } /*选定的链接,就是在鼠标点击的时候*/ a:active { color: pink; } /*input输入框获取焦点时的样式*/ input:focus { outline: none backgroud-color: #eee }
5.伪元素选择器
使用CSS生成一个新的标签属性
- 设置标签内容的首个字的形式
firist-letter
p:first-letter { font-size: 48px; color: red; }
- 在标签内容的开头加入新的内容
before
p:before { content:"*"; color:red; }
- 在标签内容的结尾加入新的内容
after
p:after { content:"[?]"; color:blue; }
PS:before and after
常用于清除浮动。
6.选择器的优先级
- 原则一:选择器相同时,谁最后加载就变成什么样子。
- 原则二:选择器不同的时候,按照权重选择。
- PS1:各个选择器的权重:内联选择器权重最高>id选择器权重次之>类选择器权重第三>元素选择器最低
- 原则三:权重选择器永不进位。
- PS2:紧急情况样式的修改使用:
样式!inportant;
,不到最后不使用,因为破坏逻辑,使得这个样式始终显示。
原文地址:https://www.cnblogs.com/abner28/p/9794862.html
时间: 2024-10-11 00:06:04