CSS

样式表：

行间样式：在行标签里面写一个style样式，如

<div style=" color:blue;">kkkkkkk</div>

内部样式：在head中写样式，在head里面写style标签

<style>

外部样式：

写的css做成一个文件（css文件中不用写style），哪个页面用就引用过去

第一种连接方式：<link rel="stylesheet" href="testcss.css"> href="css文件路径"（在head中引入，引入外面不用写style）

比较网页标题图片写法：<link rel="icon" href="路径" type="image/x-icon"/>

先找到css文件再渲染html

第二种连接方式：导入式

<style>@import url（"testcss.css（css文件路径）"）</style>先渲染html再找css文件

选择器

1、标签选择器：div{}；

2、类选择器：class（class命名时不可以用数字开头），在head中点class名字（.fontred{}）

3、id选择器：#调用（#div{}）

注：优先级 行间样式 > 内部样式 > 外部样式，优先级id选择器 > 类选择器 > 标签选择器。

不同元素之间id不可以一样class 可以一样

</style>

扩展选择器

1、并集，之间用逗号隔开

div,h1,h3,.fontred,#a1{ color: red; }

2、交集选择器：之间无任何符号及空格，标签要写在前面

p.fontred{  color: red; }

3、后代选择器:父标签 空格 子标签

div p{  color:red;  }

<div >

<P>BBBBBBBBBB</P>

<P>CCCCCCCCCC</P>

</div>

4、属性选择器：用方括号将属性及属性吗写出

[id=div1]{ color: red;}

扩展选择器按重要性排序：并集、后代、交集、属性

span标签（无任何效果，用于标记（重要））

如下：想要让东软睿道变色，用span标签包围，方便处理

<P> <span>东软睿道</span>是一家独具特色的。。。。。。</P>

ps介绍

ctrl+n新建画布

ctrl加+放大 ctrl加-缩小

按住空格拖拽画布

选择吸色器

右键提取颜色码（6位16进制数）ffffff纯白000000纯黑 ffcc33可缩写为fc3

关于文字的样式

/* 字体大小，一般给偶数 ，最小不能小于12*/

font-size:20px ;

/* 字体类型 要双引号*/

font-family: "隶书";

/* 字体加粗 */

font-weight: 700;

/* 字体风格 斜体italic */

font-style: italic;

/* 文本颜色 */

color: #7FFFD4;

/* 对齐方式（left，right，center）*/（块其中内容的水平对齐）

text-align: right;

/* 垂直居中涉及的不是内容，负责的是当前元素两侧的元素对着图片垂直居中，一般用于图片

vertical-align: middle;

/* 文本缩进 如下为首行缩进32像素（需要计算字体大小）或者用1em（1个字符）*/

text-indent: 2em;（推荐使用）

text-indent: 32px;

/* 文字装饰 underline（下划线），none（无任何格式，可用于去除链接的下划线）还有上划线、中划线等*/

text-decoration: none;

/* 行高 */

line-height: 30px;

伪类

元素：伪类的名称{ }

伪类：代表了一种状态

hover 鼠标悬停

visited 访问过的

linked

active 激活（鼠标按住不放的时候）

如下：先将a标签的下划线样式去掉，再加入伪类鼠标悬停时字体变为红色并加入下划线。

a{  text-decoration: none;  }

a:hover{   color: red;   text-decoration: underline;   }

列表取消样式list-style:none

如下，ul一级ol的样式取消

ul,ol{  list-style: none;  }

边框（border）：颜色 粗细 样式

如下：对书写顺序无要求solid（实线）dashed（虚线）

border:red 1px solid;

span及a标签等内联元素不支持宽高（靠内容撑开，直接给其宽高无法显示）

关于边框

border: 1px solid red;  (四周都给边框，1px 实线，红色)

border-bottom: 2px solid blue;（下方给框线，2px 实线，蓝色）

边框阴影 从左到右分别为xyz轴距离，最后为阴影颜色，如下：

box-shadow: 5px 5px 5px red;

边框占盒子模型大小

padding内边距

内容距离边框的距离（padding占盒子模型大小）

padding：5px;（四周边距都是5）

padding：5px 20px;（上下是5，左右是20）

padding：5px 10px 20px;（上面5，左右10，下面20）

padding：5px 10px  15px 20px;（上5，右10，下15，左20）

padding-left：

padding-top：

padding-right：

padding-bottom：

margin外边框（使用方式与padding完全一样）

外边距不占用大小

可以方便让元素在父级元素中水平居中,如下

margin:0 auto; （第一个负责Y轴（上下），第二个负责X轴（左右））

外边距的两个问题：

1、margin的Y轴（竖直方向）存在叠压问题（取最大值），X轴方向（水平方向）不存在叠压问题

2、嵌套结构时，子级紧挨着父级时，子级的上下边距会传递给父级，左右无问题。处理方式：1、给父级增加一个边框；2、给父级增加padding替换子级的margin

样式去除：

ulol：list-style=none； padding=0；margin=0；

a：text-decoration: none;

样式的继承

子级默认继承父级的样式，而a标签有自己的样式需要将样式具体到a标签

background：url（img。。。） 10px 50px no-repeat red； （第一个px是x轴，第二个是y轴，no-repeat不重复，如果repeat-x则是在x轴平铺，同样用于y轴 书写顺序无要求）

单给图片做背景 background-image

单给颜色做背景background-color

块元素：block 内联元素：inline 内联块：inline-block

显示器：display  如： div{   display：inline-block   }

display：none 从文档流中消失

浮动也能让块元素并排出现

float：left；（按照left；right展现时谁在前谁先展现）在其父级内浮动
浮动的使用特点：使用浮动以后浮动元素脱离文档流（不占原来文档流），提升层级；子级使用float以后父级塌陷。处理方式：清除浮动样式。clear：left或者clear：right或者clear：both

a标签渐变：transition:2s;

变成小手

cursor:pointer;