引入样式表

  • 行内样式 

    1. <p style="width:500px;height:300px;background-color:red;">
    2.    这是一个DIV标签
    3. </p>

  • 内嵌样式 

    <head>
   <style>
   p{
     width:500px;
     height:500px;
   }
   </style>
</head>

  • 外部样式
    Theme.css 是一个样式表文件, 所有的样式可以写在该文件中
    通过 link 标签引入后,对当前页面进行修饰(实际工作中使用非常多) 

    <head> 
<link rel="stylesheet" type="text/css" href="theme.css" /> 
</head>

    文本样式属性

    | font-size | 数字 | 设置字体大小 | | —- | —- | —- | | font-weight | normal | bold | bolder | lighter | 设置文字是否加粗 | | font-style | normal | italic | oblique | 设置文字是否为斜体 | | font-family | 字体名称 | 设置文字显示的字体名称 | | text-align | left | center | right | justify | 水平对齐方式 | | vertical-align | top | middle | bottom | sub | super | baseline | 垂直对齐方式 | | text-indent | 长度 | 设置文本缩进 | | line-height | normal | 长度 | 设置行高 | | text-decoration | none | blink | underline | line-through | overline | 设置文本装饰 | | word-wrap | normal | break-word | 长单词与url地址自动换行 |

@font-face 用于定义服务器字体
创建一个字体，在添加一个路径，就可以在网页使用定义的字体

<style>
@font-face{
  font-family:jiazhi;
  src:(字体路径);
  }
</style>

文本外观属性

letter-spacing 数字 | normal 字母间距
word-spacing 数字 | normal 单词间距
line-height 像素 | 相对值 | 百分比 行高
text-transform none | capitalize | uppercase | lowercase 文本转换
text-decoration none | underline | overline | line-through 文本装饰
text-align
(仅适用于块元素)		 left | right | center 水平对齐方式
text-indent
(仅适用于块元素)		 em(字符宽度) | 百分比 | 像素 首行缩进
white-space norma l pre | nowrap 空白符处理
text-shadow 水平阴影距离 垂直阴影距离 模糊半径 颜色 阴影效果
text-overflow clipe | ellipsis 溢出的文字带不带省略号
(要有此效果，还需要不能换行，溢出隐藏)		 
<style>
h1{
  text-shadow: 10px 10px 10px red;
  text-shadow: 10px 10px 10px red, 10px 10px 10px green;/*红绿投影叠加*/
  }
</style>

css层叠性和继承性

层叠性

当链入式定义

标签颜色为红色，行内定义字号为12px，那么段落文本会显示12像素红色，即产生了叠加

继承性

书写样式时子标签会继承父标签的某些样式，例如字体颜色

css优先级

继承权重为0
标签选择器权重为1
类选择器权重为10
id选择器权重为100
文本会选择权重最高的样式