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+