css基础知识
程序员文章站
2022-03-27 09:17:40
...
css 基础知识
- css 是什么?层叠样式表
- css 主要功能是什么? 元素样式和元素布局
css 定义 | 功能 | 备注 |
---|---|---|
css 是什么? | 层叠样式表 | 元素长什么样 |
css 主要功能 | 元素样式和元素布局 | |
css 样式来源 | 用户代理样式和用户自定义样式 | 用户代理样式为浏览器默认,用户自定义样式是用户可修改的样式 |
样式的来源
- 1、浏览器默认:用户代理样式
- 2、用户自定义样式
用户自定义样式 | 使用方式 |
---|---|
行内样式 | style=”color=”red”” |
文档样式 | <style>h1{color:red;}</style> |
外部样式 | <link rel="stylesheet" href="css/style.css" > |
继承样式 | 子元素继承父元素部分元素可被继承如 color 和 background-color: red; |
样式优先级 | 行内样式>文档样式>外部样式>代理样式>继承样式 |
样式书写顺序 | 写在后面的会覆盖前面的 |
- 1 行内样式
<!-- 行内样式 -->
<h1 color="red">hello word</h1>
- 2 文档样式也叫内部样式
<h1>hello word</h1>
<!-- 内部样式也叫文档样式 -->
<style>
h1 {
color: red;
}
</style>
- 3 外连样式也叫外部样式
<!-- 外连样式 -->
<link rel="stylesheet" href="css/style.css" />
<h1>hello word</h1>
更改元素样式需要通过以下方法
- 1 使用元素选择器查找元素
- 2 更改元素样式规则
基本选择器 | 使用说明 | 上下文选择器 | 使用说明 |
---|---|---|---|
元素或标签 | 如 h1、p、div…等 | 子元素> | .list>li{} |
属性选择器 | 如 h1[hello=”world”] | 后代元素(空格) | .list li{} |
群组选择器 | 如 h1,h2{color:red;}用逗号分隔 | 相邻兄弟+ | .list+li{} |
通配选择器 | *表示所有元素!important *别 | 所有兄弟~ | .list ~{} |
基本选择器实例
<!-- 元素或标签选择器使用方法h1{color:red;} -->
<h1>hello world</h1>
<p>p标签选择器</p>
<style>
h1 {
color: red;
}
</style>
<!-- 属性选择器使用方法h1[hello="world"]{color:red} -->
<h1 hello="world"></h1>
<style>
h1[hello="world"] {
color: red;
}
</style>
<!-- 群组选择器h1#title,h2.title{color:red;} -->
<h1 id="title">hello world</h1>
<h2 class="title">hello world</h2>
<style>
h1#title,
h2.title {
color: red;
}
</style>
<!-- 通配选择器*加上!important为*别 -->
<style>
html body * {
color: red !important;
}
</style>
上下文选择器(根据位置或者特征选择)
<ul class="list">
<li class="item">item1</li>
<li class="item second">item2</li>
<li class="item">item3</li>
<li class="item">item4</li>
<li class="item">item5</li>
<li class="item">item6</li>
<li class="item">item7</li>
<li class="item">item8</li>
</ul>
<style>
/* 上下文选择器,1 子元素> */
.list > li {
border: 1px solid #ccc;
}
/* 上下文选择器,2 后代选择器 空格 */
.list li {
border: 2px solid #bbcc;
}
/* 上下文选择器,3 相邻兄弟选择器+ */
.item.second + li {
background-color: darkorange;
}
/* 上下文选择器,4 所有兄弟选择器 ~ */
.item.second ~ li {
color: darkseagreen;
}
</style>
选择器的权重 Selector Specificity: (0, 0, 1)
- 1 标签选择器权重是个位(0,0,1)表示标签数量为 1,十位 class 为 0,百位 id 为 0
- 2 class 属性选择器权重是十位(0,1,0)表示十位 class 数量为 1,百位 id 为 0,标签为 0
- 3 id 属性选择器权重是百位(1,0,0)表示百位 id 数量为 1,class 为 0,标签为 0
<h1 class="title">item</h2>
<div class="title vip">增加class数量以提升选择器权重</div>
<style>
/* 标签选择器,权重为(0,0,1) */
h1{
color:red;
}
/* class选择器,权重为(0,1,0) */
.title{
color:red;
}
/* 增加选择器权重也就是增加class的数量,权重为(0,2,0) */
.title.vip{
color:red;
}
</style>
- 由于 id 属性的选择器为百位,权重太高,不方便做层叠样式覆盖,所以不建议使用 id 属性,tag 标签的数量有限,所以一般也不采用此属性来做选择器,class 可以任意命名无限增加,为了代码更具有弹性,所以建议尽量选择它来做开发
上一篇: 使用 VSCode 调试 Electron 主进程代码
下一篇: mybatis拦截器
推荐阅读
-
求各位大神帮我搞一个介绍云南的html静态页面_html/css_WEB-ITnose
-
webpack 配置postCSS 自动添加css兼容前缀
-
【CSS笔记十】CSS样式设置小技巧
-
为什么会出现本地和空间的样式不一样_html/css_WEB-ITnose
-
css3实现的动画效果_html/css_WEB-ITnose
-
dedecms 顶踩插件 安装后CSS不对。该如何处理
-
精心整理的十个必须要知道CSS+DIV技巧_html/css_WEB-ITnose
-
Javascript学习笔记二 之 变量_基础知识
-
Bootstrap3表单checkbox不能水平对齐问题_html/css_WEB-ITnose
-
css中相对定位和绝对定位的介绍与使用