CSS 基础

css概念

• CSS 指层叠样式表 (Cascading Style Sheets)
• 样式定义如何显示 HTML 元素
• 样式通常存储在样式表中
• 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
• 外部样式表可以极大提高工作效率
• 外部样式表通常存储在 CSS 文件中
• 多个样式定义可层叠为一

样式

1.行内样式
style="color: red;width: 200px;height: 200px;font-size: 20px;"
2.内嵌样式
 <style>
   div{
       color: blue;
   }
</style>
3.外部样式
3.1新建一个后缀名.css
3.2引入外部样式表
<link rel="stylesheet" href="css/style.css">
<style>
    @import url("css/style.css");
</style>
 rel="stylesheet" :允许使用样式表
 href="css/style.css":样式表路径

注意:外部样式实现了结构与表现的分离，提高代码复用性

样式表的优先级别(就近原则):

• 1.行内样式优先级别最高
• 2.其次是内部样式
• 3.外部样式

三大基本选择器

1.标签选择器

2.ID选择器

• 定义id:id='id名字'
• #id名{}

注意:id选择器是唯一，不能重名，而且它的权重最高，一般情况在一个父容器定义。

 

3.类选择器

• 定义类：class='类名'
• 调用类: .类名{}

三大基本选择器的优先级别

• id选择器优先级别最高
• 类选择器其次
• 标签选择器优先级别最低
• 且行内样式的优先级别是最高，比id都高

注释:

/*font-size: 25px;

font-family: "微软雅黑 Light";*/

文本样式:

font-style: italic;字体样式:斜体，倾斜
font-variant: small-caps;小型大写字母字体
font-weight: 900;加粗
font-size: 25px;字体大小
font-family: "微软雅黑 Light";!*字体类型
line-height: 200px;线高
font:italic bold 30px/200px "微软雅黑 Light" ;先后顺序
text-align: center;文本对齐方式
/*编码规则*/
 @charset "utf-8";

 派生选择器

 1.后代选择器:子子孙孙无穷尽
   eg:
       #box p{
     color: red;
   }
/*去掉a标签的下划线*/
text-decoration: none;

/*div里面id选择器为box*/
div#box{
    color: #85136d;
}
2.子选择器: >---自能找到儿子，不能隔代
  /*子选择器*/
article > section{
    color: red;
    font-weight: bold;
    font-size: 25px;
    font-family: '宋体';
}

3.相邻同级选择器(+)
 div+p {
    color: #85136d;
}
li+li{
    color: red;
}
4.所有同级选择器（~）
div ~ p{
  background: yellow;
}
/*群组选择器*/
section,h1,.box{
    color: #85136d;
    font: italic 25px '微软雅黑';
}

伪类选择器: 以:开头叫伪类选择器
 链接的四种状态：
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

/*a:hover当鼠标悬浮上去...*/
div.list:hover{
    font: italic bolder 35px '宋体';
    width: 200px;
    height: 200px;
    border: 2px dashed red;
}
/*未被访问*/
a.open:link{
    color: #85136d;
    font-size: 30px;
    font-weight: bolder;
}
/*已被访问*/
a.close:visited{
    color: #8ce4e2;
    font-weight: bolder;
    font-size: 40px;
}
/*激活(当鼠标左键按下去不松开)*/
a.change:active{
  color: yellow;
}
/*获得焦点*/
input:focus{
    border: 1px solid red;
    font-size: 25px;
    color: red;
}

 文本样式

px：像素

%：比例

em:倍数 --1

HSLa

/*色调 饱和度 亮度  透明度*/
/*
色调：除开“黑色”和“白色”从纯红色过度到纯蓝色再过度到纯红色这一过程的颜色轴的区间，共计360个色调；
饱和度：从该色调的纯黑到该色调的纯色区间，越接近黑色，饱和度越低，越接近纯色，饱和度越高；
亮度：从“纯黑”到“纯白”这一过程的表示，越接近黑色亮度越低，越接近白色亮度越高。
*/
color: HSLa(350,50%,70%,0.5);

/*
  rgb:0-255三颜色
  rgba:透明度，0-1之间，0表示100透明，1不透明
*/
color: rgba(225, 113, 255, 0.5);

去除 li 前面点

list-style: none;

list-style-type: none;

隐藏/显示

display: none;隐藏

display: block;显示

 

float:浮动

outline: none;：去文本框内边框线

多个class

<section class="box list">我是容器</section>
.box{
    color: red;
}
.list{
    font:italic bold 25px '微软雅黑';
}

 行级标签:span lable a font等

• 1.根据内容的多少显示，不会100%展示。
• 2.行级标签设置宽高不起作用

块级标签:div p section article,footer

• 1.默认一个标签100%展示
• 2.会根据设置的宽高匹配

行内块标签(行级的块级展示):input img等

1.设置宽高会起作用，但是不会换行，本质还是行级

行级，块级，行内块相互转换

• 块级转换成行级
• display: inline;
• 行级的块级展示
• display: inline-block;
• 行级转换成块级
• display: block;

属性过滤选择器

/*选取指定的属性名*/
[title]{
    color: red;
    font: italic bold 25px '幼圆';
}
/*选取指定的属性名等于属性值*/
[title="name"]{
    color: HSLa(250,70%,75%,0.8);
    font: italic bold 25px '幼圆';
}
/*选取指定的属性以...开头*/
[title^="n"]{
    color: HSLa(300,70%,75%,0.8);
    font: italic bold 25px '幼圆';
}
/*属性名以...结束*/
[title$="st"]{
    color: HSLa(200,70%,75%,0.8);
    font: italic bold 25px '幼圆';
}
/*只要属性名包含...*/
[title*='o']{
    color: HSLa(100,70%,75%,0.8);
    font: italic bold 25px '幼圆';
}
/*匹配指定以空格隔开词汇...*/
[title~='word']{
    color: HSLa(50,70%,75%,0.8);
    font: italic bold 25px '幼圆';
}

 文本样式

outline: none;文本框边框清除
border-collapse: collapse;:去除表格重复的边框

文本对齐方式:

text-align: left/center/right;左中右

文本装饰线“text-decoration”

none（默认）

不显示任何装饰线

underline

在文本下方显示装饰线

overline

在文本上方显示装饰线

line-through

在文本中间显示装饰线，相当于删除线

英文字母大小写转换“text-transform”

none（默认）

保持文本中英文单词的默认大小写

capitalize

每个英文单词首字母为大写字母，其它为小写字母

uppercase

将所有英文单词转换为大写字母

lowercase

将所有英文单词转换为小写字母

单词的间距“word-spacing”

/*词与词之间间距*/
word-spacing: 20px;
/*单字与单字之间的间距*/
letter-spacing: 20px;
/*从左到右，从右到左*/
direction: rtl;
/*预定义样式*/
white-space: pre;
white-space: nowrap;
/*pre展示*/
white-space: pre-wrap;
 /*多个空格合并成一个*/
white-space: pre-line;
/*隐藏溢出*/
overflow: hidden;
/*裁剪*/
 text-overflow: clip;
/*会有三个点*/
text-overflow: ellipsis;