<html lang="en">
<head>
<title>This is titletitle>
head>
<body>
<p style="font-size: 16px; color: red;">大家好p>
body>
html>
行内样式写在标签的 style 属性值中。
<html lang="en">
<head>
<title>This is titletitle>
<style>
p {
font-size: 16px;
color: red;
}
style>
head>
<body>
<p>Hello everyonep>
body>
html>
内部样式需要写在
标签中
.css
。在
中通过
标签引入。
<html lang="en">
<head>
<title>This is titletitle>
<link rel="stylesheet" type="text/css" href="./css/index.css">
head>
<body>
<p>我是优秀的前端开发工程师p>
body>
html>
标签中。只在本页面生效。
中通过
标签引入。用于设置字体字号,可以使用相对长度单位和绝对长度单位。
一些小知识:
格式:
p{
font-size: 18px;
}
用于设置字体。
格式:
p{
font-family: "微软雅黑";
}
可以设置多个字体,中间用逗号隔开,如果浏览器不支持第一个会自动尝试下一个,直到找到可用字体。
p{
font-family: "微软雅黑","宋体","黑体";
}
一些小知识:
字体加粗除了用 b 和 strong 标签之外,可以使用css 来实现。
属性值:
值 | 描述 |
---|---|
normal | 默认值。定义标准的字符。 |
bold | 定义粗体字符。 |
bolder | 定义更粗的字符。 |
lighter | 定义更细的字符。 |
100~900 | 定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。 |
格式:
p{
font-weight: bold;
}
一些小知识:
用于设置字体风格,字体倾斜除了用 i 和 em 标签之外,可以使用css 来实现。
属性值:
值 | 描述 |
---|---|
normal | 默认值。标准的字体样式。 |
italic | 斜体。 |
onlique | 强制倾斜。 |
格式:
p{
font-style: italic;
}
一些小知识:
字体样式可进行简写形式,一行代码同时设置字号、字体、粗细、风格。
格式:
p{
font:italic 700 20px "黑体";
font:font-style font-weight font-size font-family;
}
注意点:
格式:
/* ... */
p{
width:500px; /* 给P标签设置宽度为500像素 */
}
格式:
p{
font-size:18px;
}
直接用标签作为选择器,给页面中的所有P标签设置统一样式。
格式:
.box{
width: 500px;
}
选择页面中 class 属性值中包含 box 类名的所有元素,给它们设置样式。
格式:
#box{
width: 500px;
}
选择页面中 id 属性值中为 box 的元素,给它设置样式。
格式:
*{
margin:0;
}
代表页面中所有标签。
注意:
伪类选择器用于向某些选择器添加特殊的效果。
注意:
:link
伪类,使用的a标签的属性href=“”,必须要有实际的值,才能生效。格式:
a{
color: red;
}
a:hover{
color: green;
}
用来设置文本的颜色。属性值可以是预定义的颜色名,可以是十六进制值的颜色值,也可以是RGB颜色值。
格式:
p{
color: red;
/* color:#ff0000 */
/* color: rgb(255,0,0) */
}
一些小知识:
Color属性值是十六进制颜色值时,如果都一样,可以简写,比如 #ff0000 可以简写成 #f00 。
颜色透明:rgba属性,比rgb多了一个属性值,控制透明度,取值0-1。
p{
color: rgba(255,0,0,0.5);
}
用来设置行高,也就是文本行基线间的垂直距离。
属性值:
属性名 | line-height |
---|---|
属性值 | normal |数字 | 长度值 | 百分比 |
默认值 | normal |
line-height:2; font-size: 16px
,则行高等于:2 * 16px = 32px。line-height:32px
。格式:
p{
font-size: 18px;
line-height: 28px;
}
一些小知识:
font-size:18px;line-height:28px
。用来设置文本的对齐方式。
属性值:
格式:
p{
text-align: center;
}
用于设置首行文本的缩进,单位可以是数值、em、相对于浏览器窗口宽度的百分比,允许使用负值。
格式:
p{
text-indent: 2em;
}
用来对文本进行修饰,比如下划线等。
属性值:
格式:
p{
text-decoration: dunderline;
}
用来修饰英文的大小写。
属性值:
格式:
p{
text-transform: capitalize;
}
用来控制字符的间距。更适合汉字间距。
属性值:
格式:
p{
letter-spacing: 2px;
}
用来控制单词间距。更适合英文单词间距。
属性值:
格式:
p{
word-spacing: 2px;
}
用来给文字添加阴影部分。
属性值:
格式:
p{
text-shadow: 3px 3px 5px rgba(255,0,0,0.5);
}