程序地带

前端学习笔记--CSS篇(规则)


前言

你熟悉CSS的规则吗?


CSS介绍

CSS(Cascading Style Sheets)中文中称为层叠样式表,主要作用就是为了结构化文档(如HTML文档)添加样式。


目前W3C的推荐标准是CSS2.1,有人可能会问了现在不是CSS3吗?现在的CSS3的公布了部分(模块)标准,未完成全部制定,所以跟CSS2.1比起来标准更难找。那么为什么要用CSS3呢?因为现在浏览器已经实现了一些CSS3标准。


下面我们先来了解一下CSS规则, CSS的顶层样式表分为以下两种规则。


CSS at-rules(At规则):

@charset: 用于提示CSS文件使用的字符编码方式,使用的话必须放在最前面。

@charset "utf-8"

@import: 引入一个CSS文件,注意@charset不会被引入

@import "style.css"

@media: media query 使用的规则,能够对设备类型进行一些判断

@media (max-width: 300px) {...}

@page: 用于分页媒体访问网页时的表现设置,页面是一种特殊的盒模型结构

@page {
size: portrait;
}

@counter-sytle: 用于定义列表项的表现(只支持Firefox)

@counter-style triangle {
system: cyclic;
symbols: ‣;
suffix: " ";
}
/* 在列表中的使用 */
ul {
list-style: triangle;
}

@keyframes:定义动画关键帧

@keyframes slidein {
from {
margin-left: -100px;
width: 0px;
}
to {
margin-left: 0px;
width: 100px;
}
}
/* 使用 */
.cls-kf {
width: 100px;
height: 100px;
background-color: aquamarine;
animation-duration: 3s;
animation-name: slidein;
}

@fontface:定义一种字体,iconfont是利用这个属性实现的。

@font-face {
font-family: 'iconfont'; /* project id 446789 */
src: url('https://at.alicdn.com/t/font_446789_h92kxi0tlk6.eot');
src: url('https://at.alicdn.com/t/font_446789_h92kxi0tlk6.eot?#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_446789_h92kxi0tlk6.woff2') format('woff2'),
url('https://at.alicdn.com/t/font_446789_h92kxi0tlk6.woff') format('woff'),
url('https://at.alicdn.com/t/font_446789_h92kxi0tlk6.ttf') format('truetype'),
url('https://at.alicdn.com/t/font_446789_h92kxi0tlk6.svg#iconfont') format('svg');
}
p { font-family: "iconfont"; }
<p></p>

@supports: 检查环境

@namespace:表示内部的CSS选择器全都带上特定的命名空间

@viewport:设置视口的一些特性(兼容性不好,一般用meta代替)


CSS qualified-rules(普通规则)

从普通规则中我们可以了解到CSS规则的构成部分,我们再仔细看一下各个部分的含义。


选择器

给一个或者多个元素添加样式。


简单选择器


*选择器

* {
color: red;
}

id选择器

#id {
color: green;
}

class选择器

.cls {
color: blue;
}

标签(元素)选择器

p {
color: red;
}

伪类选择器

a:hover {
color: blue;
}

属性选择器

div[class="cls"] {
background-color: blue;
}

复合选择器


交集选择器:选择器A选择器B,两个选择器中间无任何符号。示例如下

<div class="a">Hello</div>
<div>World</div>
<style>
/*会选中是div元素并且有class属性为a的元素,所以第一个标签会被选中*/
div.a {
color: red;
}
</style>

并集选择器:选择器A,选择器B两个选择器之间用,分隔。示例如下

<p class="a">Hello</p>
<p>World</p>
<div>你好</div>
<style>
/*会选中div元素和有class属性为a的元素,所以会选中第一个标签和第三个标签会被选中*/
div,.a {
color: red;
}
</style>

后代选择器:选择器A 选择器B两个选择器之间用空格分隔。示例如下

<div>
<span>第一层</span>
<p>
<span>第二层</span>
</p>
</div>
<span>hello</span>
<style>
/*会选中div元素中包含的所有span元素,不管嵌套层级。所以会选中div下的所有span元素*/
div span {
color: red;
}
</style>

子元素选择器: 选择器A>选择器B两个选择器之间用>分隔。示例如下

<div>
<span>Hello</span>
<p>
<span>World</span>
</p>
</div>
<style>
/*会选中div嵌套的直接子元素,不会选中多层嵌套里的子元素(注意与后代选择器的区别), 所以会选中div下的第一个span标签*/
div>span {
color: red;
}
</style>

相邻选择器:选择器A~选择器B两个选择器之间用~分隔。示例如下

<div>div1</div>
<p class="p1">p1</p>
<div>div2</div>
<div>div3</div>
<p>p2</p>
<div>div4</div>
<style>
/*会选中紧贴class属性为p1的元素之后的所有div。所以会选中div2、div3和div4*/
.p1~div {
color:red;
}
</style>

兄弟选择器:选择器A+选择器B两个选择器之间用+分隔。示例如下

<div>div1</div>
<p>p1</p>
<div>div2</div>
<div>div3</div>
<p>p2</p>
<style>
/*会选中与p元素的兄弟元素div。所以会选中div2。(注意这里与相邻选择器的区别)*/
p~div {
color:red;
}
</style>

声明:属性:属性的值 ,用来制定添加元素样式的属性

属性:由中划线、下划线、字母等组成的标识符。有background,color,font-size等等

属性的值:可能是字符串、标识符。


CSS范围的关键字:inital,unset,inherit,任何属性都可以是关键字字符串:比如content等URL:使用url()函数的URL值整数/实数:比如flex属性维度:比如width属性颜色:比如color属性图片:比如background-image属性2D位置:比如background-position属性函数:比如transform属性,以下几个常见函数可以用上:
calc():基本表达式计算,支持四则运算。支持不同单位的混合运算,例如width: calc(100%-30px)max(): 取两数中较大的一个min():取两数中较小的一个clamp():给一个值限定一个范围,超出范围外则使用范围的最大或者最小值。

技术pi


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/oLianyou1/article/details/111246305

随机推荐

一点点core java的笔记-并发

一点点core java的笔记-并发

并发Runnable函数式接口(只有一个函数run),可用lamba建立实例Threadt=newThread(()→&#...

lll_564 阅读(193)

API文档的基本信息

API文档的基本信息

开发人员使用API定义软件和服务之间的交互,但是一个项目不仅仅只创建一个API,而API文档影响API的使用。企业在给定的服务创建一个API,以便团队内部人员,业务合作伙伴甚至公共的开发人员可以将其各...

隔壁王书 阅读(617)

三、LoadRunner卸载

三、LoadRunner卸载

由于安装的时候没看提前了解清楚,LoadRunner社区版只能模拟50个用户,满足不了工作需求,删了重装吧。1-打开“控制面板”-点击“卸载程序”2-找到HPLoadRunner--右键点击“卸载”3...

中华田园猫饭饭 阅读(381)

谁在用开源软件?

谁在用开源软件?

经常有用户或同行(商业软件领域)问:开源软件是不是都是个人在用呀?对于这样的提问,我感到惊讶,惊叹人与人之间的认知差异竟然这么大。开源软件顾名思义,源码开放、公开,但不代表软件质量就不行。今天不讨论这...

Websoft9 阅读(249)

以应用和客户为中心的开源软件生命周期

在长时间的实践中,我们发现:开源软件虽然是免费的,但仍然有客户基于开源软件实现了自身的商业用途。而在商用过程中,Websoft9提供了便捷性+物有超值的商业价值获得了广大客户的认可,同时提供了易获取的...

Websoft9 阅读(437)

查看windows本地jdk位数

查看windows本地jdk位数

如需帮助,请CSDN私聊,或公众号关注"我是高数老师"私聊目录1.键盘输入win+r,调用,“运行”,服务​2.输入cm...

高数老师 阅读(137)

pytest---pycharm执行pytest加入命令行参数

pytest---pycharm执行pytest加入命令行参数

上一篇介绍了一些pytest的命令行参数,那么有小伙伴们又问了,如果在pycharm中怎么加入命令行参数呢?pycharm执行命令行参数在前面有介绍到pycharm执行pytest的时候需要修改下项目...

测试-安静 阅读(868)