返回

CSS:层叠样式表

CSS:层叠样式表

	选择器 {
		属性1:属性值1;
		属性2:属性值2;
	}

样式引用方法

内部样式

<html>
  <head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
       属性1:属性值1;
           属性2:属性值2;
    </style>
  </head>
</html>

样式写在style里 style写在head里

行内样式

<div style="属性1:属性值1;属性2:属性值2;"></div>
写在行内

外部样式

  • style文件内样式

    选择器 {
      属性1:属性值1;
      属性2:属性值2;
    }
    
  • html链接方法:链接

    <html>
      <head>
        <meta charset="UTF-8">
        <title>Demo</title>
        <link href="style.css" type="text/css" rel="stylesheet"/>
      </head>
    </html>
    
  • html链接方法:导入

    <html>
      <head>
        <meta charset="UTF-8">
        <title>Demo</title>
        <style type="text/css">
         @import url("common.css");
        </style>
      </head>
    </html>
    

在外部创建独立的css文件

后缀名:css

样式引用的优先级

行内 > 内部 / 外部

基本选择器

标签选择器

所有的标签都可以做选择器

效果:页面中当前标签样式都会改变

	<p>标签选择器效果</p>
    p {
        color:green;/*设置字体颜色*/
        font-size:30px;/*字体家族*/
    }

效果:

    <p class="red">3级标题标签</p>
    .red{
        color:blue;/*设置字体颜色*/
        font-family:"黑体"; /*字体家族*/
    }

id 选择器

一个页面只能用一次

	<h5 id="top">asdd</h5>
		#top{
			color:gray;
			font-size:30px;
		}

基本属性优先级

id 选择器 > class选择器 > 标签选择器

复合选择器

后代选择器

选择器1 选择器2{
  
}

选择器1和2 可以是 标签、id、class

div span{
  color:red;
}

交集选择器

选择器1选择器2 {

}

选择器1必须是标签,选择器2可以是id或class

并集选择器

选择器1,2,3 {
  
}

什么选择器都行

p,div,span,.r,.red,#d{
  font-family:"微软雅黑"
}

复杂样式的计算方法

优先级 优先等级(数值越小等级越高)
HTML选择器 1
类选择器(class) 10
ID选择器 100

CSS样式属性

文字

font-family 设置字体名称
font-style 设置字体风格
font-size 设置字体大小
font-weight 设置字体的粗细
font-variant 设置字体小型大写字母
font-stretch 设置字体横向拉伸变形
color 设置文本颜色
text-align 设置元素水平对齐方式
comments powered by Disqus