[前端]css的理解 - 了解css

文章目录


CSS:

Cascading Style Sheets层叠样式表

用来定义页面元素的样式(设置字体和颜色;设置位置和大小;添加动画效果)

组成

选择器Selector、属性Property、属性值Value(h1{color:white;})

属性+属性值:一条声明Declaratuion;多条声明分号隔开

在页面中使用CSS

<!--外链-->
<link rel= "stylesheet" href= " / assets/style.css ">
<!--嵌入-->
<style>
	li { margin:0;list-style: none;}
	p { margin: lem 0 ;}
</ style>
<!--内联-->
<p style="margin:lem 0 ">Example Content</p>

内联不需要选择器,直接写在style里,不推荐,某些场景加UI组件等可以;

推荐使用外链;

现在组件开发Vue组件分离、关注点分离

css是如何工作的(css应用到页面)

(只有css)

加载HTML -> 解析HTML ( -> 加载CSS -> 解析CSS -> 添加样式到DOM节点 ) -> 创建DOM树 -> 展示页面

把每一个DOM节点都解析属性样式 -> 形成渲染树 -> 展示页面

选择器选择器 Selector

1.找出页面中的元素,以便给他们设置样式

2.使用多种方式选择元素:

按照标签名、类名或id;按照属性;按照 DOM树中的位置

通配选择器(*号匹配所有)

标签选择器(div,p,h1,…)

id选择器(#,id="";id唯一)

类选择器(.,class="")

属性选择器(disabled…)

属性选择器

<label>用户名:</label>
<input value="zhao" disabled />
<label>密码:</label>
<input value="123456" type="password"/>
<style>
[disabled] {
	background: #eee;color: #999;
}
</style>

[disabled]只要这个元素有disabled属性就可以选中[前端]css的理解 - 了解css

要选择特定的值:input[type=“password”]只会选input并且type="password"的
[前端]css的理解 - 了解css

<p>
	<label>密码:</label>
	<input type="password" value="123456"/>
</p>
<style>
	input[type="password"]{
		border-color: red;color: red;
	}
</style>

3.属性选择器属性满足条件时选择

<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>

<style>
	a[href^="#"] {
		color: #f54767;
		background: 0 center/1em
url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
		padding-left: 1.1em;
	}
	a[href$=".jpg"] {
		color: deepskyblue;
		background: 0 center/1em
url(https://assets.codepen.io/59477/image3.png) no-repeat;
		padding-left: 1.2em;
	}
</style>

a[href^="#"]href匹配以#开头的

a[href$=".jpg"]href匹配以.jpg结尾的
[前端]css的理解 - 了解css[前端]css的理解 - 了解css

伪类(pseudo-classes)

伪类:不基于标签和属性定位元素

几种伪类:状态伪类;结构性伪类

1.状态伪类:元素处于某种状态

如链接a:link默认状态;a:visited访问过;a:hover鼠标移上去;a:active鼠标按下

鼠标点输入框,聚焦到输入框:focus(outline:外边框)
[前端]css的理解 - 了解css

a:link {
	color: black;}
a:visited {
	color: gray;}
a:hover {
	color: orange;}
a:active {
	color: red;}
:focus {
	outline: 2px solid orange;}
2.结构性伪类

根据dom节点在dom树中出现的位置

li:first-child选中li中第一个孩子,设置颜色

li:last-child选中li中最后一个孩子,设置没有下边框

[前端]css的理解 - 了解css

<ol>
	<li>阿凡达</li>
	<li>泰坦尼克号</li>
	<li>星球大战:原力觉醒</li>
	<li>复仇者联盟3</li>	 
	<li>侏罗纪世界</li>
</ol>
<style>
li{
	list-style-position: inside;
	border-bottom: 1px solid;
	padding: 0.5em;
}
li:first-child {
	color: coral}
li:last-child {
	border-bottom: none;}
</style>

还有更复杂的如奇数偶数等

组合:

直接组合:条件都要满足;如input.error{}要求既要是输入框,又要是.error

[前端]css的理解 - 了解css

<article>
	<h1>拉森火山国家公园</h1>
	<p>拉森火山国家公园是位于...</p>
	<section>
		<h2>气候</h2>
		<p>因为拉森火山国家公园...</p>
		<p>高于这个高度,气候非常寒冷...</p>			</section>
</article>
<style>
	article p {
		color: black;}
	article > p{
		color: blue;}
	h2 + p{
		color: red;}
</style>

[前端]css的理解 - 了解css

选择器组

多个选择器样式差不多或一样,选择器写在一起,逗号隔开

body, h1, h2, h3, h4, h5, h6, ul, ol, li {
	margin: 0 ;
	padding: 0 ;
}
[type="checkbox"], [type="radio"] {
	box-sizing: border-box;
	padding:0 ;
}

文字设置样式

颜色

1.RGB指定各种基本颜色的多少来确定,用两位16进制数表示

[前端]css的理解 - 了解css

2.HSL色相、饱和度、亮度

Hue:色相(H)是色彩的基本属性,如红色、黄色等;取值范围是0-360。

Saturation:饱和度(S)是指色彩的鲜艳程度,越高约鲜艳;取值范围0-100%。

Lightness:亮度(L)指颜色的明亮程度;越高颜色越亮;取值范围是0-100%。
[前端]css的理解 - 了解css

HSL在某些场景下比较方便,如button设置按下后颜色可将L降低,其他不变[前端]css的理解 - 了解css

3.关键字

[前端]css的理解 - 了解css

4.透明度alpha(不透明度)

为1时完全不透明,0为完全透明

加在后面rgba/hsla,数字表示是转为对应的16进制

字体font-family

浏览器按照字体顺序选本地有的字体;

英文字体风格写在前面,对英文起作用,英文用特定字体;

字体列表最后写上通用字体族:最后指定通用风格保证效果serif,sans-serif,Cursive,Fantasy,Monospace

<h1>卡尔斯巴德洞窟(Carlsbad Caverns)</h1>
<p>卡尔斯巴德洞窟(Carlsbad Caverns)是美国的一座国家公园,位于新墨西哥州东南部。游客可以通过天然入口徒步进入,也可以通过电梯直接到达230米的洞穴深处。</p>
<style>
h1 {
	font-family: optima,Georgia,serif}
body {
	font-family: Helvetica,sans-serif;}
</style>

[前端]css的理解 - 了解css

通用字体族

衬线体:末尾有装饰;

无衬线体:线条均匀;

手写体;Fantasy;

等宽字体:代码编译器里的字体

[前端]css的理解 - 了解css

使用Web Fonts

将字体当作资源放在服务器上,@font-face引用服务器上的字体[前端]css的理解 - 了解css

<h1>web fonts are awesome!</h1>
<style>
	@font-face {
		font-family: "Megrim";
		src:
url(https://fonts.gstatic.com/ sxmegrim/v11/46kulbz5wjvLqJZVam_hVUdI1w.woff2)
format( 'woff2');
}
h1 {
	font-family: Megrim,Cursive;}
</style>

中文字体文件比较大,使用一些裁切好的字体文件引入占空间小
[前端]css的理解 - 了解css

font-size字体大小

三种方式:

关键字(small、medium、large)浏览器内置,多大定义好;

长度(px、em);

百分数(相对于父元素字体大小)

<section>
	<h2>A web font example</h2>
	<p class="note">Notes: web fonts ...</p>		<p>with this in mind,let's build...</p>
</section>
<style>
	section {
		font-size: 20px;}
	section h1 {
		font-size:2em;}
	section .note {
		font-size: 80%;
		color: orange;}
</style>

h1的font-size为2em:相当于父元素二倍的大小:40px;

.note的font-size为80%:20x80%=16px
[前端]css的理解 - 了解css

如实现按钮设置边距圆角等属性,使用em,改变时改变文字大小,相应的属性也变化

em:文字相当于父元素的大小;边距等相当于其文字大小

rem:相对于根元素(移动端适配)

1vh/1vw:屏幕高度的1%/屏幕宽度的1%

字体粗细斜体

正常/斜体:font-style:normal/italic

设置粗细font-weight:100/200/…/900(具体看字体支持,浏览器选择最近字体显示)比较安全用400(normal)/700(bold)
[前端]css的理解 - 了解css

文字行间距line-height

表示每行基线base-line间的距离[前端]css的理解 - 了解css

h1 {
font-size: 30px;line-height: 45px;}
p {
font-size: 20px;line-height: 1.6;}

p元素使用没有单位的数表示line-height:20x1.6 = 16px

文字font

一个属性设置所有属性;顺序:斜体 粗细 大小/行高 字体族

h1 {
	/*顺序:斜体 粗细 大小/行高 字体族 */
	font: bold 14px/1.7 Helvetica, sans-serif ;}
p {
	font: 14px serif;}
文字对齐方式text-align

text-align:left/center/right/justify(分散对齐;两端对齐)

justify只会对非最后一行的文字生效;只有一行文字也不会生效

间距spacing

letter-spacing:字符间距

word-spacing:单词间距

文字缩进text-indent

text-indent:默认0px;也可以为负

文本装饰text-decoration

text-decoration:none/underline(下划线)/line-through(删除线)/overline(上方的线)

空格换行white-space

normal / nowrap / pre / pre-wrap / pre-line

默认连续空格会合并成一个空格;

nowrap不换行,多个空格合并;

pre保留所有空格、换行(所有样式);

pre-wrap一行显示不下时换行;

pre-line合并成空格,保留换行

调试

右键点击页面,选择「检查」

使用快捷键
-ctr1+Shift+I(windows)

-Cmd+Opt+I (Mac)

css动画

过渡transition:一个点到另一个点

animation连续变化


总结

提示:这里对文章进行总结:
例如:以上就是今天的内容,本文仅仅简单介绍了css的理解上篇-了解CSS,介绍了css是什么,怎么运用css等,更多有关前端的介绍参考后续文章。

上一篇:JavaScript中undefined和null的区别


下一篇:snabbdom h函数