CSS

CSS

层叠级联样式表

1.CSS语法

分为：行间、内部、外部

行间样式：在标签上通过style属性来设置

内部样式：head上的style

外部样式：css文件导入

1.1 字体样式

<!--
    font-family:字体
    font-size:字体大小
    font-weight:字体的粗细
    font-style: 设置字体风格，italic：斜体; inherit：继承父标签的字体风格
    在一个属性中设置所有的字体样式，按顺序设置 font-style font-variant font-weight font-size font-family，如果有一个未设置值，会选择默认值，必须要设置font-size，font-family
-->

1.2 文本样式

<!-- 
    color：字体颜色
    text-align：字体对齐方式
    text-indent：首行缩进
    line-leight：行高
    text-decoration：字体显示的格式
        underline：下划线
        overline：上划线
        line-through：删除线
        none：无线
-->

1.3 基本选择器

内部样式：head上的style

用于将样式添加到某个指定的标签之上

选择器语法： ​ 选择器类型{ ​ 样式属性:值; ​ 样式属性:值; ​ 样式属性:值; ​ } 1.标签选择器：不需要标签上设置样式表，自动给同名的标签加载样式属性 ​ 标签名{ ​ 样式属性:值; ​ 样式属性:值; ​ } ​ p { ​ color: red; ​ font-size: 18px; ​ } 2.class选择器：通过标签的Class属性给标签设置样式， 一个标签之上可以加载多个class样式，选择器和选择器中间使用空格隔开 ​ 语法： ​ .class选择器的名称{ ​ 样式属性:值; ​ 样式属性:值; ​ } ​ .title { ​ color: aqua; ​ font-size: 12px; ​ } 3.Id选择器：通过标签的Id属性给标签设置样式，在一个html文档中标签中的id值不能有重复的，一般用于布局标签之上 ​ 语法： ​ #选择器名称{ ​ 样式属性:值; ​ 样式属性:值; ​ } ​ #sing { ​ color: salmon; ​ }

1.4 层次选择器

内部样式：head上的style

通过标签之间的层次结构来设置标签的样式

1.子选择器 给body中的p标签设置字体颜色/ body>p { ​ color: #FA8072; } 2.后代选择器 后代选择器：给body中的所有p标签设置字体颜色/ body p { ​ color: salmon; }

若 <p class="avtion">2</p> 3.相邻选择器 将avtion之后的第一个p标签的字体颜色设置颜色/ .avtion+p{ ​ color: #FA8072; } 4.兄弟选择器 将avtion之后所有的p标签的字体颜色设置颜色/ .avtion~p{ ​ color: #FA8072; }

1.5 超链接伪类

内部样式：head上的style

标签在不同的状态下，显示不同的样式。鼠标单击 ​ link：超链接点击之前 ​ visited：链接被访问过 ​ hover：鼠标悬停 ​ active：鼠标未释放之前

按照顺序编写伪类，如果vistited在hover、active之后，vistited覆盖hover、active的样式： ​ a:link “链接”：超链接点击之前 ​ a:visited “访问过的”：链接被访问过之后 ​ a:hover “悬停”：鼠标放到标签上的时候 ​ a:active “激活”： 鼠标点击标签，但是不松手时。

1.6 属性选择器

内部样式：head上的style

通过标签的属性值给标签设置样式

1.给存在Id属性的a标签设置样式 a[id]{ ​ color: #FA8072; }

2.给target等于_blank的标签设置样式 a[target=_blank] { ​ color: #FA8072; } 3.class中有link字符的a标签 a[class*='link'] { ​ color: #FA8072; } 4.title以test开始的a标签 a[title^='test'] { ​ color: #FA8072; } 5.href以doc结尾的a标签 a[href$='doc'] { ​ color: #FA8072; }

1.7 列表样式

内部样式：head上的style

设置列表总体

ul { ​ /* 去掉项目符号 / ​ list-style-type: none; ​ / 将项目符号设置为图片 / ​ list-style-image: url(img/arrow-right.gif); ​ / 设置行高 */ ​ line-height: 20px; }

设置 li 中的 a 标签

ul li a { ​ /* 去掉下划线 */ ​ text-decoration: none; }

1.8 盒子模型

 

 

div中设置属性

 

1.9 display

display: block; 将行级标签改为块级标签

display: none; 隐藏标签

 

1.10 float浮动

float: left/right 左浮动右浮动

clear :清空标签左右两边的浮动效果

 

1.11定位

position: relative;相对定位，相对当前标签以前的位置对标签重新定位

position: absolute;绝对定位，以第一个有进行定位的父级节点，进行定位，如果所有的父级都没有进行定位，那么就以浏览器窗口的原点位置给元素定位

 

1.12 z-index

标签的层次 z-index: 0;

透明度 opacity: 0.5;