引入CSS样式表

CSS可以写到那个位置？是不是一定写到html文件里面呢？

内部样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：

<head>
<style type="text/CSS">选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>

1.在html5中可以省略，但一般都会写上，比较规范

2.一般放在head标签内，也可以放在其他位置

行内式（内联样式）

内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

外部样式表（外链式）

链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：

<head><link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
</head>

link单标签，放在头部head里面

1.herf，定义外部样式文件的URL，可以是相对路径，也可以是绝对路径

2.type，所连接文档的类型，text/CSS表示是一个css文件

3.rel 定义当前文档和所链接文档的关系，在这里需要指定stylesheet，表示链接的是一个样式表文件

三种样式表总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现样式和结构的分离	较少	控制一个标签
内部样式表	部分结构和样式分离	没有完全分离	较多	控制一个页面的标签
外部样式表	完全实现样式和结构的分离	需要引入	最多，墙裂推荐	控制整个站点

标签显示模式（display）

标签的类型(显示模式)

HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。具体如下：

块级元素(block-level)

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

每个块级元素都占一行，可以设置宽高，对齐等属性，常用于网页布局和结构的搭建

块级元素的特点

总是从新行开始
高度，行高，外边距及内边距都可以控制
宽度都是容器的100%
可以容纳内联元素和其他块级元素

行内元素(inline-level)

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

行内元素(内联元素)并没有独立的空间，靠内容(文字，图片)来撑起结构的，一般不可以设置宽高，对齐等属性，常用域控制页面中的文本的样式

行内元素的特点:

和相邻的行内元素在同一行上
宽高无效，单水平方向的padding，margin可以设置的，垂直的无效
默认宽度就是本身内容的宽度‘
行内元素能容文本或其他行内元素

1.链接里面不可以放链接
2.行内元素不可以放块级标签

块级元素和行内元素区别

块级元素的特点

总是从新行开始
高度，行高，外边距及内边距都可以控制
宽度都是容器的100%
可以容纳内联元素和其他块级元素

行内元素的特点:

和相邻的行内元素在同一行上
宽高无效，单水平方向的padding，margin可以设置的，垂直的无效
默认宽度就是本身内容的宽度
行内元素能容文本或其他行内元素

行内块元素（inline-block）

在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点:

和相邻的元素(行内元素或行内块元素)在一行上，但之间会有空隙
默认宽度也本身内容的宽度
行高，宽高都可以控制

标签显示模式转换 display

块级元素转化行内元素

display:inline

行内转块级

display:block;

块级元素行内元素转行内块

display:inline-block;

CSS复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

交集选择器

由两个选择器组成，标签选择器，第二个class选择器，两个选择器之间不能有空格

p .p1{color: red;}

交集用的比较少

并集选择器

并集选择器用逗号链接，任何形式的选择器都可以作为并集选择器的一部分

div,p{color: red;}

后代选择器

也称为包含选择器，用空格连接，子子孙孙都可以被选中

注意：把外层标签写在前面，内层标签写在后面，中间用空格分割

子元素选择器

只包含子元素，父级标签写在前面自己标签写在后面，中间用>连接

测试题

<div class="nav">    <!-- 主导航栏 --><ul><li><a href="#">公司首页</a></li><li><a href="#">公司简介</a></li><li><a href="#">公司产品</a></li><li><a href="#">联系我们</a><ul><li><a href="#">公司邮箱</a></li><li><a href="#">公司电话</a></li></ul></li></ul>
</div>
<div class="sitenav">    <!-- 侧导航栏 --><div class="site-l">左侧侧导航栏</div><div class="site-r"><a href="#">登录</a></div>
</div>
<style>.site-r a{color:red;}.nav ul li a{color: skyblue;}</style>

在不修改以上代码的前提下，完成以下任务：

链接登录的颜色为红色,同时主导航栏里面的所有的链接改为蓝色
主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。
主导航栏里面的一级菜单链接文字颜色为绿色。

属性选择器

选取标签带有某些特殊属性的选择器我们称为属性选择器

div[class^=font]{color: red;}div[class$=font]{color: blue;}div[class*=font]{color: pink;}

标签名[属性名^=属性值]{ 属性名1：属性值1;

}

^起始位置

$结束位置

*任意位置

伪元素选择器（CSS3)

1.E::first-letter 文本的第一个单词或字

2.E::first-line文本第一行

3.E::selection，可以改变选中文本的样式

4.E::before 和E::after

在E元素内部的开始位置和结束位置创建一个元素，该元素为行内元素，必须要结合content属性使用

伪类是一个冒号。伪元素是两个冒号

CSS书写规范

要养成良好的代码规范，这是专业化的开始

空格规范

【强制】选择器与{之间必须包含空格

.one { }

【强制】属性名与之后的:之间不允许包含空格，:与属性值之间必须包含空格

font-size: 12px;

选择器规范

【强制】当包含多个选择器时，每个选择器声明都必须独占一行

.one, .two, .three{ } 错误写法

.one, 正确写法

.two,

.three { }

【建议】选择器的嵌套层级不应该大于三级

属性规范

【强制】属性定义必须另起一行

【强制】属性定义后必须加上分号

CSS 背景(background)

CSS 可以添加背景颜色和背景图片，以及来进行图片设置。

background-color	背景颜色
background-image	背景图片地址
background-repeat	是否平铺
background-position	背景位置
background-attachment	背景固定还是滚动
背景的合写（复合属性）
background:背景颜色背景图片地址背景平铺背景滚动背景位置

背景图片(image)

语法：

background-image : none | url (url)

none 无背景图

url 背景图片的地址

背景平铺（repeat）

语法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y

背景位置(position)

语法：

background-position : length || lengthbackground-position : position || position

背景附着

语法：

background-attachment : scroll | fixed

背景简写

background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：

background:背景颜色背景图片地址背景平铺背景滚动背景位置

background: color url(image.jpg) repeat-y  scroll 50% 0 ;

背景透明(CSS3)

CSS3支持背景半透明的写法语法格式是:

background: rgba(0,0,0,0.3);

背景缩放(CSS3)

其参数设置如下：

a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）

b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多

c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

多背景(CSS3)

以逗号分隔可以设置多背景，可用于自适应布局做法就是用逗号隔开就好了。

一个元素可以设置多重背景图像。
每组属性间使用逗号分隔。
如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
为了避免背景色将图像盖住，背景色通常都定义在最后一组上，

凹凸文字

导航栏案例

博客9-12css2相关推荐

Typora+PicGo图床配置(本地图片--＞网络url~博客必备）
前段时间搭了一个hexo博客,但是发现了一个很大的问题,在Typora里编辑你的博文的时候,插入的图片都是一些本地图片,然后部署的时候根本不能加载这些图片~~ 其中一个解决方法就是通过一些平台,像知乎 ...
hexo框架个人博客的搭建(面试加分！)
目录 1. 安装node.js 2. 安装Git 3. 安装hexo 4. 和github关联 1. GitHub创建仓库 2. 配置SSHkey添加到Github 3. 上传到Github所建仓库 ...
【Gamma】“北航社团帮”展示博客
目录团队介绍项目愿景整个项目的预期典型用户功能展示原预期用户数量项目使用情况数据分析用户量变化学生认证人数社长认证人数入社申请数活动发布新闻发布网页端使用情况小程序打开次数 ...
博客园在微信内置浏览器打开时添加微信赞赏码功能
我的博客开通了赞赏,看右侧悬浮[打赏],很容易弄,文末有链接. 另外,在微信中打开时,博客正文底部增加微信赞赏码,在微信内置浏览器打开时,长按图片识别,直接可以赞赏. 这本人自己摸索的,未参考任何博文 ...
DS博客作业04--树大作业
1.树的存储结构本组采用的树的存储结构为链式结构,选择如图所示的结构体 Name为结点的名称 LevelNum为孩子节点的个数 *Children[20]用来指向不同的孩子结点(类似于二叉树的结构体 ...
第一篇博客，纪念一下，终于开通啦！
终于有网了,可以把自己积累的内容都放到博客上来了. 纪念一下. 转载于:https://www.cnblogs.com/tinazzz/p/7067482.html
杂谈 - 开始认认真真写博客了
今天晚上一口气写了几篇博客的标题,后续再慢慢补充,生怕一下子又给忘记了.一方面是有些东西记下防止再用的时候半天找不着,也省去了搜索的时间,另一方面也是一个思绪整理的过程,有些似懂非懂的只有真正到了写的 ...
关于博客园与CSDN博客同步的说明
把博客园与CSDN比较,我认为博客园有技术内容优势,CSDN有行业资源优势,两者都比较重要.因此在两家网站同步发布博客. CSDN博客地址:http://blog.csdn.net/caoshiyin ...
测试代码发布到博客效果(Windows Live Writer发布)
测试代码发布到博客效果(Windows Live Writer发布) public class SwitchCase {/*** 1.switch后面的表达式为常量表达式,类型只能是可以转化为int. ...
多年没有管理的技术博客了，即日起开始管理起技术博客
多年没有管理的技术博客了,即日起开始管理起技术博客,希望朋友们一如既往的支持转载于:https://www.cnblogs.com/flashicp/archive/2012/08/14/26390 ...

博客9-12css2