文章目录
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属性就可以选中
要选择特定的值:input[type=“password”]只会选input并且type="password"的
<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结尾的
伪类(pseudo-classes)
伪类:不基于标签和属性定位元素
几种伪类:状态伪类;结构性伪类
1.状态伪类:元素处于某种状态
如链接a:link默认状态;a:visited访问过;a:hover鼠标移上去;a:active鼠标按下
鼠标点输入框,聚焦到输入框:focus(outline:外边框)
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中最后一个孩子,设置没有下边框
<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
<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>
选择器组
多个选择器样式差不多或一样,选择器写在一起,逗号隔开
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进制数表示
2.HSL色相、饱和度、亮度
Hue:色相(H)是色彩的基本属性,如红色、黄色等;取值范围是0-360。
Saturation:饱和度(S)是指色彩的鲜艳程度,越高约鲜艳;取值范围0-100%。
Lightness:亮度(L)指颜色的明亮程度;越高颜色越亮;取值范围是0-100%。
HSL在某些场景下比较方便,如button设置按下后颜色可将L降低,其他不变
3.关键字
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>
通用字体族
衬线体:末尾有装饰;
无衬线体:线条均匀;
手写体;Fantasy;
等宽字体:代码编译器里的字体
使用Web Fonts
将字体当作资源放在服务器上,@font-face引用服务器上的字体
<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>
中文字体文件比较大,使用一些裁切好的字体文件引入占空间小
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
如实现按钮设置边距圆角等属性,使用em,改变时改变文字大小,相应的属性也变化
em:文字相当于父元素的大小;边距等相当于其文字大小
rem:相对于根元素(移动端适配)
1vh/1vw:屏幕高度的1%/屏幕宽度的1%
字体粗细斜体
正常/斜体:font-style:normal/italic
设置粗细font-weight:100/200/…/900(具体看字体支持,浏览器选择最近字体显示)比较安全用400(normal)/700(bold)
文字行间距line-height
表示每行基线base-line间的距离
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等,更多有关前端的介绍参考后续文章。