前端

css样式规则

由两部分构成：选择器，声明

p{font-size:30px;color: blue;}

css引用

  • 行内样式（内联样式）
    • 在开始标签内添加style样式属性 如:<p style=”color:blue;”>内容</p>
  • 内部样式表（嵌入样式）
    • 把css样式代码写在:<style type=”text/css”>样式</style> 并放在<head>标签内
  • 外部样式表
    • 把css样式代码写在独立的一个文件中 扩展名.css 需要在html内引入该文件 <link href=” .css” rel=”stylesheet” type=”text/css” />
  • 导入式
    • @import “外部css样式” <style type=”text/css”>@import “css.css” 或 @import url(css.css) </style>
类别引入方法位置加载
行内样式开始标签内stylehtml文件内同时
内部样式<head>中<style>内html文件内同时
链入外部样式<head>中<link>引用.css样式文件与.html文件分离页面加载时同时加载css样式
导入式@import在样式代码最开始处.css样式文件与html文件分离在读取完html文件之后加载
  • 优先级
    • 行内样式>内部样式>外部样式

说明：1.链入外部样式表与内部样式表之间的优先级取决于所处位置的先后。2.最后定义的优先级最高（就近原则）

css选择器

  • 标签选择器（以HTML标签作为选择器）p、h1、h2…
  • 类选择器 (为HTML标签添加class属性)
    • <h1 class=”red”></h1> 通过类选择器设置样式 .red{color:red;}可对不同类型元素的同一个名称的类选择器设置不同样式规则 如: p.red{font-size:50px’} h1.red{font-size:20px}; 同一个元素可以设置多个类，之间用空格隔开 <p class=”red fsize”></p>
  • ID选择器 (为HTML标签添加ID属性)
    通过类选择器设置样式 #p1{color:red;}
  • 全局选择器 （所有标签设置样式）
    • *{…}
  • 群组选择器
    • p,h1,h2,h3,h4{font-size:30px;}
  • 后代选择器
    • 如：设置class为red的p标签下em标签 p.red em{font-size:40px;}

优先级规则

  • !important声明高优先 如:p b{…!important}
  • 同一样式表中
    1. 权值相同
      • 就近原则（离被设置元素越近优先级越高）
    2. 权值不同
      • 根据权值来判断css样式
      • 哪种css样式权值高就使用哪种样式

选择器权值

  • 标签：1
  • 类和伪类：10
  • ID：100
  • 通配符：0
  • 行内样式：1000

权值规则

  • 统计不同选择器的个数
  • 每类选择器的个数乘以相应权值
  • 把所有的值相加得出选择器的权值

伪类

伪类选择器定义特殊状态下的样式，无法用标签、ID、class及其它属性实现

  • 链接伪类
    • 链接的4种状态：激活、已访问、未访问、鼠标悬停状态。
    • 顺序：link>visited:hover:active
    • 注意：hover必须置于link和visited之后才有效 active必须置于hover之后才有效 伪类名称对大小写不敏感
伪类说明
:link未访问的链接
:visited已访问的链接
:hover鼠标悬停状态
:active激活的链接
a:link{color: blue;}
a:visited{color: gray;}
a:hover{color: green;}
a:active{color: orange;}

css继承

从父元素那继承部分css属性 如：在一个div下有许多p标签，只需要设置div样式即可改版p标签样式 注：不是所有属性都能继承。

css层叠

  • 可以定义多个样式
  • 不冲突时，多个样式可层叠为一个
  • 冲突时，按不同样式规则优先级来应用样式

css样式命名

  • 采用英文字母、数字及”-“和”_”
  • 以小写字母开头
  • 命名形式：单字、连字符，下划线和驼峰
  • 使用有意义命名

常用命名

  • 页面结构
    • 页头：header 主体：main 页尾：footer 内容：content/container 容器：container 导航：nav 侧栏：sidebar 栏目：column 页面外围控制：wrapper 左右中：left right center
  • 导航
    • 导航：nav 主导航：mainnav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 标题：title 摘要：summary
  • 功能
    • 标志：logo 广告：banner 登录：login 登陆条：loginbar 注册：register 搜索：search 功能区：shop 标题：title

文字样式属性

  • 字体：font-family 定义元素内文字以什么字体来显示
    • 语法：font-family:字体1,字体2…
    • 说明：
      • 含空格字体名和中文，用英文引号括起来
      • 多个字体，用英文逗号隔开
      • 引号嵌套，外使用双引号，内使用单引号
  • 文字大小：font-size 定义元素内文字大小
    • 语法：font-size:绝对单位|相对单位
    • 绝对单位：in cm mm pt pc
      xx-small x-small small medium large x-large xx-large
    • 相对单位：px像素 em/%
  • 文字颜色：font-color 定义元素内文字颜色
    • 语法：color:颜色名|十六进制|RGB
  • 文字粗细：font-weight 为元素内文字设置粗细
    • 语法：font-weight:normal | bold | bolder | light | 100~900
    • 说明：默认值normal，400等同于normal，700等同于bold
  • 文字样式：font-style 为元素内文字设置样式
    • 语法：font-style:normal | italic | oblique
  • 字体变形：font-variant 设置元素文本为小型大写字母
    • 语法：font-variant:normal | small-caps
<style type="text/css">
    /* 字体 */
	h1{font-family: "宋体";}
	p{font-family: "微软雅黑";}
    /*文字颜色*/
	p{color: rgb(0%,0%,100%);}/*数字-~255*/
	p{color: rgb(0,0,255);}/*百分比0%~100%*/
	p{color: red;}/*具体颜色名称*/
	p{color: #0000FF;}/*十六进制 #开头，六位，0~F*/
    /*斜体*/
        
</style>

css文本样式

  • text-align 设置元素内文本的水平对齐方式
    • 语法：text-align:left | right | center | justify
    • 注：该属性只对块级元素设置有效
  • vertical-align：设置元素内容的垂直方式
    • 语法：vertical-align:baseline | sub | super | top | text-top | middle |bottom | text-bottom | 长度 | 百分比
vertical-align
<style type="text/css">
.text1{text-align: left;}
.text2{text-align: right;}
.text3{text-align: center;}
.text4{text-align: justify;}
</style>
<p class="text1">用于定义HTML内容在浏览器中的显示样式。</p>
<p class="text2">用于定义HTML内容在浏览器中的显示样式。</p>
<p class="text3">用于定义HTML内容在浏览器中的显示样式。</p>
<p class="text4">用于定义HTML内容在浏览器中的显示样式。</p>

垂直居中应用

单行文字垂直居中

<style type="text/css">
	.warp{
		height: 400px;
		width: 100%;
		border: 1px blue solid;
		line-height: 400px;
		/* 垂直居中 */
		text-align: center;
	}
</style>

多行文字垂直居中

<style type="text/css">
	.warp{
		height: 400px;
		width: 100%;
		/* 边框 */
		border: 1px blue solid;
		line-height: 400px;
		/* 垂直居中 */
		display: table;
		
	}
	.content{vertical-align: middle;
			display: table-cell;
			/* 水平居中 */
			text-align: center;
        }
</style>

<div class="warp">
	<div class="content">
		<h1>你好</h1>
		<h2>Welcome to Website.</h2>
	</div>
</div>

文本样式属性

字体属性说明
word-spacing设置元素内单词之间间距
letter-spacing设置元素内字母之间间距
text-transform设置元素内文本的大小写
capitalize | uppercase | lowercase | none
text-decoration设置元素内文本的装饰
underline | overline | line-through | blink | none
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css样式</title>
		<style type="text/css">
			p{background-color: #ececec;height: 150px;text-align: center;line-height: 150px;}
			.one{font-size: 80px;color: #c9394a;font-weight: bold;}
			.two{font-size: 40px;color: gray;text-decoration: underline;letter-spacing: 5px;vertical-align: 0.9375rem
			.three{font-size: 80px;color: gray;font-style: oblique;}
		</style>
	</head>
	<body>
		<p><span class="one">你好</span>  
			<span class="two">欢迎来这</span>
			<span class="three">!</span>
		</p>
	</body>
</html>

发表回复