样式
字体颜色 color: ;
背景颜色 background-color: ;
字体大小 font-size: ;
外边距 margin: ;
//共能输入4个值,分别代表上边距 右边距 下边距 左边距,呈顺时针
//如果只输入1个值则代表四边边距
//只输入两个值则代表上下边距 左右边距
内边距 padding: ;
边框 border: 10px solid black;
//共能输入三个值,分别代表宽度 实(虚)线 颜色
//虚线:dotted dashed
//实线:solid double(双实线)
字体样式 font-family: ‘’;
字体倾斜 font-style: italic;
字体粗细 font-weight: bold;
字体对齐方式 text-align: left;
//左对齐:left
//右对齐:right
//居中对齐:center
//两端对齐:justify
字体下划线 text-decoration: underline red dotted;
//共有三个属性 线条类型 颜色 实(虚)线
//none:无下划线
//underline:下划线
//line-through:删除线
//overline:上划线
首行缩进 text-indent: 2em;
设置字间距 letter-spacing: ;
设置行高 line-height: ;
设置文本阴影 text-shadow: 30px 30px 1px brown;
//四个值分别为水平方向偏移量 垂直方向偏移量 阴影面积(模糊程度) 阴影颜色
引入样式的三种类型
内联样式
即在<head>内添加一个<style>标签,在其中添加样式后引用到代码中
例如:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.p{
font-size: 100px;
color: red;
font-family: '宋体';
}
</style>
</head>
<body>
<p class="p">内联样式</p>
</body>
行内样式
行内样式即将样式写在行内,在标签后边添加style属性
<body>
<p style="font-style: italic; font-weight: bold; color: white; background-color: black;">行内样式</p>
</body>
外部引入
在外部创建一个css文件,随后使用link引入到html文件中
样式名
当使用内联样式和外部引入时,为了精准定位到需要样式的地方,需要进行命名
命名分为class和id两种,同时也可以直接使用标签名对全局中的样式进行样式更改
class命名后在style标签中和css文件中为“.xx”
例如class="p" 则想选中这个标签便为".p"
id命名后为“#xx”