CSS课程笔记
如何引用css样式
内联样式
<html>
<head>
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>标题1</h1>
</body>
</html>
外联样式 link
新建的样式文件扩展名是.css
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>标题1</h1>
</body>
</html>
设置浏览器地址栏上的小图标
<head>
<title>Document</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
</head>
type
属性可以省略,rel
属性不可以省略
行内样式 style
<h1 style="color:yellow">标题1</h1>
注意:
css
是一门静态语言
导入@import url
<style>
/*导入css*/
@import url("css/style.css");
</style>
css link和@import区别用法
1、link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
2、link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
3、link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
4、link支持使用Javascript控制DOM去改变样式;而@import不支持。
css选择器
id选择器
<style>
#red{
color: red;
}
</style>
<h1 id="red">标题1</h1>
class(类)选择器
<style>
.green{
color: green;
}
</style>
<h1 class="green">标题1</h1>
<h2 class="green">标题2</h2>
tag(标签)选择器
<style>
h1{
color: blue;
}
</style>
<h1>标题1</h1>
attr(属性)选择器
<style>
[name="h1"]{
color: orange;
}
</style>
<h1 name="h1">标题1</h1>
<h2 name="h1">标题2</h2>
属性选择器支持通配符:
^
以什么字符开头
<style>
[class ^= "fa"]{
color: pink;
}
</style>
<div class="fa add ">标题1</div>
<div class="fa remove">标题2</div>
$
以什么字符结尾
<style>
[class $= "fa"]{
color: yellow;
}
</style>
<div class="add fa">标题1</div>
<div class="remove fa">标题2</div>
*
包含什么字符(开头和结尾都算)
<style>
[class *= "fa"]{
color: cyan;
}
</style>
<div class="ok fa add">标题1</div>
<div class="no fa remove">标题2</div>
:before (伪类) 选择器
<style>
/* 默认 */
a:link{
color: blueviolet;
text-decoration: none;
}
/* 单击过后 */
a:visited{
color: gray;
}
/* 鼠标滑过 */
a:hover{
text-decoration: underline;
}
/* 单击一瞬间 */
a:active{
line-height: 2;
}
</style>
<a href="#">超级链接</a>
注意:超级链接伪类样式定义的顺序是
LVHA
,也就是Link
->Visited
->Hover
->Active
level(层级或者关系) 选择器
<style>
/* 空格是指box内部所有的后代都算 */
.box h2{
color: coral;
}
/* 大于是指box内部一级后代都算 */
.box > h2{
color: red;
}
/* 注意之间没有空格,表示two和box是属于同一个元素的类 */
.box.two{
color: palevioletred;
}
/* box后面紧跟加号,代表 加号后面的元素是box元素的下面同辈的第一个元素。 */
.box + h4{
color: chartreuse;
}
/* box后面紧跟星号,代表 星号后面的元素是box元素的下面同辈的所有元素。 */
.box ~ *{
color:chocolate;
}
</style>
<div class="box two">
<h2>标题</h2>
<p>段落</p>
<ul>
<li>
<h2>标题2</h2>
</li>
</ul>
</div>
<h4>标题4</h4>
<p>段落1</p>
<p>段落2</p>
<span>连接</span>
* (通配符) 选择器
- 要慎用此选择器,因为它会造成一定的性能开销
* {
margin: 0;
padding: 0;
}
2019-6-10
选择器优先级
!important
- 行内样式
style
id
class
类 和attr
属性是相同优先级tag
标签- 默认样式
<style>
#box{
color: red;
}
.box{
color: blue;
}
[name="box"]{
color: blueviolet;
}
div{
color: green !important;
}
</style>
<div id="box" class="box" name="box" style="color: cyan">
文字文字
</div>
css定义的权重
tag
标签的权重为1
class
类的权重为10
id
的权重为100
<style>
.nav li{
display: inline;
color: blue;
}
.active{
color: red;
}
</style>
<ul class="nav">
<li>首页</li>
<li class="active">关于我们</li>
<li>联系我们</li>
</ul>
以上代码,因为.nav
是类,它的权重是10
,li
是标签,它的权重是1
,所有.nav li
加起来的权重就是11
,而.active
是类,权重为10
,10
小于11
,所以active
类的红色无法覆盖。
正确写法如下:
<style>
.nav li{
display: inline;
color: blue;
}
.nav li.active{
color: red;
}
</style>
<ul class="nav">
<li>首页</li>
<li class="active">关于我们</li>
<li>联系我们</li>
</ul>
可继承和不可继承属性
可继承属性
color
颜色属性
不继承color属性的标签:
a
超级链接button
按钮input
输入框select
下拉框textarea
多行输入框
-
font-size
字体大小属性不继承
font-size
属性的标签:button
按钮input
输入框select
下拉框textarea
多行输入框
-
font-family
字体属性不继承
font-family
属性的标签:button
按钮input
输入框select
下拉框textarea
多行输入框
-
line-height
行高 -
UL LI DL DD DT
项目列表
不可继承属性
border
: 边框width
:宽height
: 高margin
: 边距padding
:填充
css 样式规则
命名
字母(或者_-)开头,后面允许数字、字母、下划线、中横杠
以下是错误的css
命名
.1red{
color:red;
}
.222{
color:red;
}
.@abc{
color:red;
}
.abc cd{
color:red;
}
.abc{
color:green;
}
.ab-cd{
color:green;
}
.AB-CD{
color:green;
}
.ab_cd{
color:green;
}
.ab123{
color:green;
}
注意:css命名严格区分大小写,建议一律小写
语法规则
属性名: 属性值;
错误的写法
/*使用了中文的冒号*/
.abc{
color:red;
}
/*使用了等于号*/
.abc{
color = red
}
/*使用了中文的分号*/
.abc{
color: red;
}
/*使用了逗号分割属性,应该是分号*/
.abc{
color: red,
font-size: 12px
}
/*没有使用分号分割属性,注意最后一个属性可加分号,也可以省略*/
.abc{
color: red
font-size: 12px
}
正确的写法
.abc{
color:red;
font-size:12px;
}
文本
对文字进行一系列修饰的属性
color
:颜色(4种表达)font-size
:文字大小 (px
、%
、em
、rem
、vw
、vh
)
注意:各大主流浏览器默认字体大小通常是
16px
px、em、rem的区别
px
称为像素,它是一种抽象的单位,在谷歌中文浏览器下,最小不能小于12px
。
em
它是相对的单位,它始终是相对父元素继承过来的字体大小作为参考大小。
<style>
div{
font-size: 30px;
}
span{
color:red;
font-size: 1em;
}
</style>
<div>
<p>
<span>文本</span>
</p>
</div>
rem
它是相对的单位,相对根元素html
的参考大小的一种单位。
注意:后期学习响应式布局,我们推荐使用
rem
作为首选单位,因为我们可以通过调整html
根元素的字体大小,来确保页面中所有字体大小是等比例的放大缩小关系。
vw
它是相对的单位,表示可视宽,注意它大小不是一成不变
vh
它是相对的单位,表示可视高,注意它大小不是一成不变
注意:块元素的宽度默认相当于
100%
,所有不需要手动设置width:100%
,然后块元素的高度100%
,是需要从直接父元素中高度(实值)得到的。
<style>
/* 第1步 */
html{
height: 100%;
}
/* 第2步 */
body{
height: 100%;
}
/* 第3步 */
div{
background-color: red;
height: 100%;
/* 如果使用100vh则不需要第1-2步 */
}
</style>
<div>
文字
</div>
-
font-weight
加粗属性bold
加粗600
加粗normal
不加粗
-
font-style
斜体属性italic
斜体normal
不倾斜
-
font-variant
属性设置小型大写字母,normal
正常
<style>
span{
color: red;
font-size: 30px;
}
.small{
font-variant: small-caps;
}
</style>
<span>abcde</span>
<span class="small">abcde</span>
font-family
:定义字体的属性
注意:字体定义不是随心所欲的定义,要考虑兼容情况,它有一套后备机制。
elementUI
团队字体定义方案:
body{
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}
antd
团队字体定义方案:
body{
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB','Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol';
}
text-transform
:文本转型capitalize
首字母大写lowercase
一律小写uppercase
一律大写none
不应用转型
text-decoration
:文本用线修饰
none
: 无修饰线overline
:上划线line-through
:中划线underline
:下划线
<style>
span{
font-family: sans-serif;
font-size: 30px;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
text-transform: capitalize;
text-decoration: underline;
color: red;
}
</style>
<span>abcde cdddddd</span>
text-align
:文本对齐
可以使用text-align
对齐的元素:
- 文本
- 行内标签
span
、b
、em
- 行块标签
img
、video
、input
<style>
div{
width: 200px;
height: 200px;
background-color: red;
text-align: center;
}
</style>
<div>
<span>你好</span>
</div>
居中对齐演示
<style>
div{
width: 200px;
height: 200px;
background-color: red;
text-align: justify;
}
div p{
width: 100px;
background-color: green;
margin-left: auto;
margin-right: auto;
}
</style>
<div>
<p>文字</p>
</div>
left
:左对齐center
:居中对齐right
:右对齐justify
:两端对齐
两端对齐示例
<style>
div{
width: 300px;
text-align: justify;
}
</style>
<div>
<p>于人谈“契约”,于己忙“弃约”,这就是当前美国一些政客在世人眼中的形象。这些人口头上将所谓契约精神奉为圭臬,孰不知高高在上、颐指气使的行为举止同真正的契约精神格格不入,挖了一个个“弃约陷阱”的同时,他们也在撕下自己脸上的假面具。</p>
</div>
text-indent
:文本缩进属性
<style>
div{
width: 300px;
text-align: justify;
text-indent: 2em;
}
</style>
<div>
<p>于人谈“契约”,于己忙“弃约”,这就是当前美国一些政客在世人眼中的形象。这些人口头上将所谓契约精神奉为圭臬</p>
<p>于人谈“契约”,于己忙“弃约”,这就是当前美国一些政客在世人眼中的形象。这些人口头上将所谓契约精神奉为圭臬</p>
</div>
提示:
text-indent
有时候也会用在seo优化上,使得文字不显示。
<style>
a.logo{
display: inline-block;
text-indent: -999em;
}
</style>
<a href="#" class="logo">思诚科技</a>
white-space
:强制不换行
<style>
div{
width: 200px;
background-color: red;
}
div p{
white-space: nowrap;
}
</style>
<div>
<p>id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式</p>
</div>
text-overflow
:文本溢出处理ellipsis
表示溢出后使用...
单行文本溢出省略效果
<style>
div{
background-color: red;
width: 300px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
</style>
<div>
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文
</div>
word-break
:强制换行
当书写一些连续的字符时,它不会换行,那么需要强制换行
<style>
div{
width: 300px;
background-color: red;
word-break: break-all;
}
</style>
<div>你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你</div>
强制换行推荐下面的写法
div{
word-wrap: break-word;
word-break: normal;
}
text-shadow
: 文字阴影
语法:
text-shadow: x轴偏移 y轴偏移 blur模糊度 颜色值
<style>
span{
text-shadow: 2px 2px 1px rgba(0, 0, 0, .5);
}
</style>
<span>你好</span>
注意:文字阴影兼容是
IE9+
2019-6-11
line-height
:行高
<style>
ul li{
line-height: 40px;
font-size: 16px;
}
</style>
<ul>
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
</ul>
注意:正文我们推荐行高采用倍数设置,1代表一个字体高度,这样的好处就是字体放大,行高也跟着放大,保持比例关系,好看。
行高一般应用在单行定高垂直居中
<style>
div{
width: 200px;
line-height: 50px;
background-color: blueviolet;
}
</style>
<div>
文字
</div>
不定高单行垂直居中解决方案
<style>
div{
width: 200px;
padding-top: 10px;
padding-bottom: 10px;
background-color: blueviolet;
}
</style>
<div>
文字<br>
文字<br>
文字<br>
文字<br>
</div>
多行文字垂直居中解决方案
<style>
div{
display: table;
width: 200px;
height: 400px;
background-color: blueviolet;
color: white;
}
div span{
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
<div>
<span>
文字<br>
文字<br>
文字<br>
文字<br>
</span>
</div>
text-size-adjust
:设置移动端页面中对象文本的大小调整
在ios下你横屏或者竖屏时,浏览器会调整你的字体大小,这样的体验并不好,所以我通常设置none
html{
/*不允许调整文本大小*/
text-size-adjust: none;
}
user-select
:用户选择对象
body{
/* 表示整个文档禁止选择文本 */
user-select: none;
}
伪类和伪元素
:link
:超级链接默认颜色:visited
:超级链接单击过后颜色:hover
:元素划过状态:active
:元素单击一瞬间状态
<style>
p:hover{
color: brown;
}
p:active{
color: green;
}
</style>
<p>文本</p>
before
:在元素内部的前面创建一个伪元素
<style>
p:before{
content: "?";
font-size: 30px;
vertical-align: middle;
}
</style>
<p>文本</p>
after
:在元素内部的后面创建一个伪元素
<style>
p:after{
content: "?";
font-size: 30px;
vertical-align: middle;
}
</style>
<p>文本</p>
:first-child
:查找目标元素内部第一个子元素:last-child
:查找目标元素内部最后一个子元素:nth-child(n)
:查找目标元素内部指定序号的元素,序号还支持倍数关系
nth-child
中n
可能存在的值:
- 纯数字:代表指定的序号
- 数字加n:代表改数字的倍数,2n表示匹配 2、4、6、8、10…
- even:偶数
- odd:奇数
- 数字加n加数字:例如 2n+1,n起步是0
<style>
ul li:first-child{
color: red;
}
ul li:last-child{
color: green;
}
ul li:nth-child(2n+1){
color: blue;
}
</style>
<ul>
<li>首页</li>
<li>关于</li>
<li>产品</li>
<li>联系</li>
</ul>
:checked
:选择所有选中的表单元素
<style>
input:checked{
display: none;
}
</style>
<input type="radio"> 男
<input type="radio" checked> 女
:disabled
:选择所有禁用的表单元素
<style>
button:disabled{
cursor: not-allowed;
}
</style>
<button disabled>提交</button>
:empty
:选择所有没有子元素的p元素
<style>
div p:empty{
height: 50px;
background-color: red;
}
</style>
<div>
<p>段落1</p>
<p></p>
<p>段落2</p>
</div>
:first-of-type
:选择的每个 指定元素是其父元素的第一个指定元素
<style>
div p:first-of-type{
color: red;
}
</style>
<div>
<span>文本1</span>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
</div>
:last-of-type
:选择的每个 指定元素是其父元素的最后一个指定元素
<style>
div p:last-of-type{
color: red;
}
</style>
<div>
<span>文本1</span>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<span>文本2</span>
</div>
:not(selector)
:选择所有指定元素以外的元素
<style>
div p:not(.two){
color: red;
}
</style>
<div>
<p>段落1</p>
<p class="two">段落2</p>
<p>段落3</p>
<p>段落4</p>
</div>
:only-child
:选择所有仅有一个子元素的指定元素
<style>
div :only-child{
color: red;
}
</style>
<div>
<span>文本</span>
</div>
:root
: 选择文档的根元素
html中文档的根元素始终是html
:root{
font-size: 15px;
}
/* 以上代码相当于 */
html{
font-size: 15px;
}
:focus
:选择获得焦点的元素
<style>
input{
border: 1px solid #ccc;
outline: none;
}
input:focus{
border: 1px solid red;
}
</style>
<input type="text" placeholder="请输入用户名!">
:selection
:获得选择文本的对象
<style>
::selection{
background-color: orange;
color: red;
}
</style>
测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
注意:此伪类必须使用双冒号,单冒号不会执行
- 美化滚动条系列伪类
::-webkit-scrollbar
滚动条整体部分::-webkit-scrollbar-thumb
滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)::-webkit-scrollbar-track
滚动条的轨道(里面装有Thumb)::-webkit-scrollbar-button
滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。::-webkit-scrollbar-track-piece
内层轨道,滚动条中间部分(除去)::-webkit-scrollbar-corner
边角,即两个滚动条的交汇处::-webkit-resizer
两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
<style>
::-webkit-scrollbar{
width: 6px;
background-color: #ddd;
}
::-webkit-scrollbar-thumb{
background-color: rgb(70, 114, 155);
border-radius: 3px;
}
.box{
width: 200px;
height: 200px;
background-color: #ccc;
overflow: auto;
}
</style>
<div class="box">
<p> 默认情况下,选择网站文本都是深蓝的背景,白色的字体,那么我们如何在浏览</p>
<p> 默认情况下,选择网站文本都是深蓝的背景,白色的字体,那么我们如何在浏览</p>
<p> 默认情况下,选择网站文本都是深蓝的背景,白色的字体,那么我们如何在浏览</p>
<p> 默认情况下,选择网站文本都是深蓝的背景,白色的字体,那么我们如何在浏览</p>
</div>
::placeholder
:用来设置placeholder属性的样式
<style>
input{
color: red;
}
::placeholder{
color: green;
font-family: "华文行楷";
}
</style>
<input type="text" placeholder="请输入密码">
背景
background-color
:背景颜色
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
<div>
文本
</div>
background-image
:设置背景图像
默认背景图像填充方式是水平垂直平铺的
<style>
div{
width: 500px;
height: 500px;
background-image: url(images/bg.png);
}
</style>
<div>文本</div>
background-repeat
:设置背景图标重复方式
no-repeat
:不重复repeat
:重复,水平垂直平铺,默认repeat-x
:水平重复repeat-y
:垂直重复round
:拉伸背景图像,使它完全贴合宽和高
<style>
div{
width: 500px;
height: 500px;
background-image: url(images/bg.png);
background-repeat: no-repeat;
}
</style>
<div>文本</div>
background-position
:用于背景图像对齐,总共有9种对齐方位
left top
: 用百分比代替 是0 0
left center
: 用百分比代替 是50% 0
left right
: 用百分比代替 是100% 0
center top
: 用百分比代替 是50% 0
center center
: 用百分比代替 是50% 50%
right top
: 用百分比代替 是100% 0
20px 20px
: 坐标原点是左上角(0,0),在第4象限,支持负数的值。
注意:推荐使用百分比作为对齐方案,因为兼容性更好
background-attachment
:设置背景图片跟随页面是否滚动
scroll
:跟随页面滚动,默认fixed
:固定,不跟随页面滚动。
注意:
scroll
效果只在body
元素上才能有所体现
background-attachment:fixed
注意应用在一些视觉差效果体验上
background-size
:设置背景图像的尺寸
cover
:封面,让背景图片自动完整匹配指定的宽和高,背景图有可能被裁切contain
:包含,将背景图片自动等比例缩放到容器中,可能会造成没有完全铺满的情况,但被图片不会被裁切100% auto
: 也可以自己设置指定的值,来调整背景图片尺寸,单位可以使用%
、px
<style>
div{
width: 300px;
height: 300px;
background-color: #ccc;
background-image: url(images/1.png);
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
</style>
<div>
<p>文本</p>
</div>
- 多个背景图像
多个背景图片采用英文逗号分割,其它背景图片属性,也采用英文逗号分割。
<style>
div{
width: 300px;
height: 300px;
background-color: #ccc;
background-image: url(images/bg.png),url(images/smile.svg);
background-repeat: no-repeat,repeat;
background-position: 60px 60px,30px 30px;
}
</style>
<div>
<p>文本</p>
</div>
注意:排第一个位置背景图片,在最高层,层级顺序依次递减。
- 背景图片使用渐变填充
- 线性渐变
语法
background-image: linear-gradient(方向, 颜色点, 颜色点, ...);
水平垂直方向有以下方位:
to bottom
:从上到下to top
:从下到上to right
:从左到右to left
:从右到左
<style>
div{
width: 100px;
height: 100px;
background-image: linear-gradient(to right,red, blue);
}
</style>
<div>线性渐变效果</div>
对角方向有以下方位:
to left top
:到左上to left bottom
:从左下to right top
:到右上to right bottom
:从右下
方向也可以使用角度:
语法:
background-image: linear-gradient(角度, 颜色点, 颜色点, ...);
<style>
div{
width: 100px;
height: 100px;
background-image: linear-gradient(45deg,blue, orange);
}
</style>
<div>线性渐变效果</div>
- 径向渐变