css元素放在style
元素中,放在head
元素末尾
<html>
<head>
xxxxxx
xxxxxx
<title></title>
<style></style>
</head>
<body></body>
</html>
CSS有三种插入样式表的方法
分别是内联css、内部css和外部css
内联css
用来为一个单一的元素应用一个独特的样式
<body>
<h1 style="color: blue; text-align: center;">xxxxx</h1>
<p style="color: red;">
xxxxx
</p>
</body>
内部css
内部样式表一般定义在head元素中,通过style
元素来定义,页面的样式均需要添加在style元素内部
这样样式声明到了html元素的外部
css选择器:用来寻找或选择你想要定义的HTML元素的
元素选择器
根据元素名称来选择HTML元素的
background-color
:给页面的整体添加背景颜色
margin-left
用于定义h1标题元素位于父容器左侧的距离
弊端一:内部样式表只能用于一个界面
弊端二:需要不停上下滚动屏幕编辑,非常麻烦
解决方法:使用外部css,也叫外部样式
通过改变一个文件来改变整个网站的外观
外部css
外部样式,将css代码放在一个独立的、以.css为后缀名的文件中
使html页面结构文件和css样式文件完全独立开来
每个html页面都必须在head元素里添加link
元素
在<link>
元素里定义rel
属性,值为stylesheet
,表示关联一个样式表
href
用于设置一个对外部样式表文件的引用,值为.css文件的路径
css样式的优先级
选择器类型
css简单选择器
简单选择器:根据名称、ID、类别来选择元素
css选择器是用来“寻找”或“选择”想要定义样式的HTML元素
元素选择器:
根据元素名称来选择HTML元素的
<style>
p{
text-align:center; /段落p的内容均居中
}
</style>
id选择器:
使用一个HTML元素的id属性来选择一个特定的元素
id
是唯一的
要选择一个具有特定id的元素,可以写一个#然后是该字符的id,比如#para2
id不能以数字开头
<style>
#para2 { id不能以数字开头
text-align:center;
font-style(声明字体风格):italic; 倾斜
}
</style>
<body>
<p id="para2"> id不能以数字开头
id选择器
</p>
</body>
类选择器:
可以选择具有特定class属性的HTML元素
<head>
<style>
.italic {
font-style:italic;
text-decoration(声明文本修饰样式): underline; 下划线
}
</style>
</head>
<body>
<h1 class="italic">
类选择器
</h1>
<p class="italic">
类选择器
</p>
</body>
如果同时需要两个类选择器,不用再定义一个新的class
,可以直接在上一个后面加空格再说明
例如: class="italic deco xxxxx xxxxx"
另外一种用法:p.italic {text-align; }
这样类选择器选择的元素就更加具体
只有p
的样式被修改,h1
里的样式不会改变
class
的命名不能以数字开头
分组选择器
实现方法为将多个选择器哟个逗号分隔,如:h1,p{}
通用选择器:
选择页面上的所有HTML元素,方法:(*)
CSS组合选择器
通过一些特殊符号将多个简单选择器连接起来,就构成了组合选择器
再CSS种,组合选择器有4种:
1、后代选择器,通过空格连接
2、子选择器,通过大于号(>)连接
3、相邻的兄弟选择器,通过+号连接
4、一般兄弟选择器,通过~连接
后代选择器:
匹配作为指定元素后代的所有元素
div p {
background-color: yellow 选择了<div>元素内的所有<p>元素
}
子选择器:
只能选择作为某元素的子元素,不能选择到孙辈的元素
div>p {
background-color: yellow 选择了<div>元素内的所有<p>元素
}
CSS伪类选择器
属于类选择器中的一种,根据特定状态选取元素
基本语法:
selector(其他基础选择器):鼠标行为{
color=red;
}
常用的伪类选择器有四个:
1、鼠标点击前 使用:link连接 代表鼠标没有操作元素时元素的默认样式
2、鼠标点击后 使用:visited连接 代表鼠标点击并离开元素之后的样式
3、鼠标悬停时 使用:hover连接 代表鼠标悬停或者是划过元素时元素的样式
4、鼠标点击时 使用:active连接 代表鼠标点击元素瞬间,元素现实的额样式伪类选择器也可以应用在其他元素上,但是只能实现active激活瞬间和hover鼠标悬停效果
<style>
div {
width: 200px; /定义div块的宽度
height: 200px; /定义div块的高度
background-color: skyblue; /定义div块的背景颜色
}
div:hover { /悬停到div块时的样式
background-color: red; /定义div块的背景颜色
}
div:active { /点击div块时的样式
width: 100px; /定义点击div块时的宽度
height: 100px; /定义点击div块时的高度
}
</style>
伪元素选择器
通过伪元素选择器,可以设置元素指定部分的样式。主要用来设置元素内文本的首字母,首行的样式、或是在元素内容之前或者之后插入其他内容
基本语法为:
<style>
selector(目标元素)::pseudo-element(向目标元素内,添加伪元素,并对伪元素的内容进行修饰) {
color: red;
font-size: 30px;
}
</style>
伪元素选择器有五种:
1、::first-letter 用来实现向文本的首个字符,添加特殊样式
2、::first-line 用来实现向文本的首行添加特殊样式
3、::before 用来实现在元素内容之前插入内容
4、::after 用来实现在元素内容之后插入内容
5、::selection 用来更改选中文本的样式
在使用伪元素选择器向前向后插入内容时,必须配合content
才能实现效果
selection
伪元素选择器只支持一下几个样式声明:color(文本颜色),background(背景),cursor(鼠标样式),outline(描边效果)
CSS属性选择器
根据属性或者属性值来查找元素
基本语法:
Element(元素)[attribute(属性)] 查找带有该属性的元素,然后添加样式声明
Element[attribute="value"] 实现快速精准查找元素
例如:
a[target] {
background-color: yellow 含义:查找带有target属性的a元素,并且为a元素添加了背景颜色为黄色的样式声明
}
CSS选择器的四种属性:
1、[attribute]:来查找HTML结构中,带有attribute属性的所有元素
2、[attribute="value"]:来查找HTML结构中,带有attribute属性并且属性值为value的元素
3、[attribute~="value"]:来查找HTML结构中,带有attribute属性并且在多个属性值中包含value的元素
4、[attribute|="value"]:来查找HTML结构中带有attribute属性,并且属性值以value或者是value-开头的元素。
该属性的值只能有一个
CSS文本颜色和大小写转化
<h1>xxxx</h1>
<p>
xxxxxxxxxxxxxxx
</p>
body {
color: red; 一个页面的默认文本颜色是在body选择器中定义的
}
CSS强制转换文本中,单词和字母的大写和小写
使用 text-transfrom
属性
p.transform {
text-transform:属性
}
有三个属性: 这些属性主要用来设置英文的文本 ,对中文无效
uppercase:
文本被转换为大写
lower:
文本被转换为小写
capitalize:
每个单词的首字母被转换为大写
CSS文本对齐和文本间距
文本对齐
水平对齐:
text-align:
left(左对齐)、center(居中对齐)、right(右对齐)、justify(两端对齐)
垂直对齐:
vertical-align
baseline(基线对齐)、text-top(文本顶部对齐)、text-bottom(文本底部)、sub(下角标对齐)、super(上角标对齐)
baselin
是基于四线三格中间行对齐的,对于英文文本才有意义
文本间距
text-indent
属性实现
使用长度值或者百分比来设置文本缩进,长度值可以使用绝对单位(50px)和相对单位(2em,就是两空格)
字符宽度如果是中文方块字,也可以称之为字体大小,通过font-size
属性设置
百分比缩进是根据父元素的宽度计算得到的
litte-spacing
属性用于指定中文文字或者英文字母之间的空隙,也就是字间距
line-height
属性用于指定行与行之间的高度,也就是行高
三个常用属性值: 注意是属性值
normal: 也是默认值,浏览器会根据字符大小自动设置一个行高。
一个数字:比如 1.5,此数字与当前的字符大小相乘计算得到。
绝对值: 比如 20px,-5px,设置固定的行间距。
word-spacing
属性用于指定文本中单词的间距,只对英文有效
有一个常用的属性值nowrap
不管包含文本的元素宽度是多少,文本都不会换行.直到遇见br
标签为止。
CSS文本装饰
下划线,删除线之类的颜色粗细
用text-decoration-line
属性实现
具体的值有三个:
overline:
在文本上方添加(上划线)
Line-through:
在文本中间添加线条修饰(删除线)
underline:
在文本下方添加线条修饰(下划线)
若要同时设置多个值,用空格隔开
h1 {
text-decoration-line: overline line-through underline;
}
为文本设置装饰线的颜色通过text-decoration-color
属性实现
为装饰线指定风格通过text-decoration-style
属性实现
有五个属性值:
solid:
实线
double:
双实线
dotted:
圆点线
dashed:
虚线
wavy:
波浪线
通过text-decoration-thickness
属性为线条设置厚度(线条的粗细)
有三个值:
auto:
默认值
px:
像素大小,是一个绝对值
%:
是一个相对值
text-decoration
是一个简写的属性
h4 {
text-decoration: underline(text-decoration-line) red(text-decoration-color) double(text-decoration-style) 5px(text-decoration-thickness);
四个顺序并没有要求,但是"text-decoration-line"必须设置
}
链接属性默认有下划线,如果要去除可以如下:
a {
text-decoration: none;
}
CSS字体和自号
字体
使用font-family
属性指定一个文本的字体,属性值为字体名称
英文字体分为五类:
第一类Serif
有衬线字体
第二类Sans-serif
无衬线字体
第三类Monospace
单空格字体
第四类Cursive
草书字体
第五类Fantasy
幻想字体
中文通用字体有两个:微软雅黑、苹方简,分别应用于Windows系统和Mac系统
字号
通过font-size
属性设定文本的大小,属性值可以为绝对大小(px)和相对大小(em/%)
相对大小em:会根据继承下来的父元素尺寸计算得到,如果元素嵌套的层数太多,计算起来就会太麻烦
所以可以使用rem
这个相对单位,相对于根元素(html)
CSS字体风格和样式简写
font-style
指定字体样式
normal:
文本正常显示
italic:
文本斜体显示
font-weight
属性指定了一个字体的粗细
属性值设置有两种方式:名称和数值
名称有四个:
lighter:细体
normal:正常字体
bold:加粗字体
bolder:更粗字体
数值则为:100,200,300.....900 值越大,文本越粗
名称和数值对应关系:
100——lighter
400——normal
700——bold
900——bolder
font-variant
属性指定了文本是否应以小型大写字符显示
有两个值:normal
和small-caps(小型大写字母)
,只对英文有效
注意:如果文本本身写的是大写字母,则不生效
可以用font
简写代码
a{
font: oblique 100 small-caps 30px/30px 华文仿宋
其中 font-size 和 font-family 这两个值是必须的
}
CSS谷歌字体和Icon图标
在应用font-family
属性声明样式字体时,除了使用HTML中的标准字体外,还可以使用谷歌字体
要使用谷歌字体,只要在head
元素里添加一个特殊的样式表链接
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia(字体名称)">
</head>
body {
font-family: "Sofia", serif;
}
若要使用多个谷歌字体,只需用管道字符竖线(|)
分隔字体名称
谷歌字体还能随心所欲的添加字体样式,在链接的字体后面添加&
定义effect=fire
然后给p
定义class="font-effect-fire"
要引用多个样式,同样可以用管道字符竖线(|)
图标库网站,fontawesome.com
注册好之后,点击"Copy Kit Code"按钮
在 link 下面有键粘贴
在页面里三个段落的开头,添加3个i
元素
全部定义class
属性,可以分别设置值为
fas fa-cloud
,fas fa-heart
,fas fa-car
然后每个段落的开头就会出现一个小图标
更多的图标可以访问地址https://fontawesome.com
图标可以用style
属性设置样式,比如color:red