大数据WEB阶段（三）CSS

CSS

一、概述

css：层叠样式表，可以用来美化html页面。可以实现html代码和设置样式的css代码的分离。增强了页面的显示能力。

二、在html中引入css样式的方式

内嵌式
1. 大多数便签都可以具有style属性，可以通过style属性为当前标签设置样式。
2. 这种设置方式不推荐大量使用，会造成页面结构的混乱，不理与后期的维护及扩展。
```
<div style="border:10px solid red; font-size:50px">这是一个div
</div>
```
内联式
1. 样式定义在head内部，可以提供一个style标签，在style标签内可以选中元素进行修饰。（选择元素是通过选择器实现的，下面有详细介绍）
2. 这种方式将所有的css代码放在一个 style标签内部统一管理。初步实现了html与css代码分离
```
<style type="text/css" media="screen" id="test">#d1{border:10px solid green;font-size:10px;}
</style>
```
外联式
1. 通过head标签下的link标签可以引入外部的css文件
2. 这种方式是将所有的css代码放在一个独立的文件中进行统一管理，真正实现了html与css的分离
```
<link rel="stylesheet" href="demo.css" />
```

三、div、span、p标签

这三个标签都可以看做是一个容器，可以用来包裹其他的html内容，被包裹起来的内容形成了一个组，可以通过css样式对这一组的内容统一设置样式。
div : 独占一行，标签可以把文档分割为不同的独立的部分
span ：并非独占一行，多个span会并排排列，直到一行排满才会换行。该标签用于组合文档中的行内元素。
p：独占一行，但是元素会自动在其前后创建一段空白，是段落标签。
元素的类型：
- 块级元素：默认情况下会独占一行，如： div 、p 、 h1~h6 、hr
- 行级元素：默认情况下，多个元素可以处在同一行，如： span、input 、font

四、选择器

选择器可以在html中选中想要修饰的标签，进而进行修饰。
基本选择器：
1. 标签名选择器
  1. 通过标签的名称选中相应的标签
```
格式：元素名{} ， 如div{}<div>ddd</div>
```
2. 类选择器
  1. 通过标签上的class属性，可以把标签设置为一个类别，而后通过类选择器进行选择后修饰
```
格式： .c1{ /*css属性*/  key:value;}<div class="c1">ddd</div><span class="c1">span</span><p class="c1">p</p>
```
3. ID选择器
  1. 通过标签上的ID属性，可以为标签设置编号， id的值在整个html文档中是独一无二的，可以通过id选择器选中标签的id进行修饰。
```
格式：#id{css属性}   如：#c{}<div id="c">dddddd</div>
```

扩展选择器

后代选择器

在父选择器选中的元素内部，再选中指定的后代元素进行修饰。

要求：选中所有div下所有的span标签
格式：div span{}<div><span>s1</span><span>s2</span><span>s3</span>
</div>

子元素选择器

在父选择器选中元素的内部，选中指定的子元素进行样式的修饰。

要求： 只选中 父元素层下一层的子元素 ，而不选中父元素的孙子元素
格式： 父元素>子元素{} 如： div>span<div><span>s1</span><div><span>s2</span></div></div>
注意 ： 只能选中s1 而选不中s2 .

分组选择器

一次选中多个标签来统一设置样式。

要求： 同时对div ， span 进行设置
格式： div,span{}<div>ddd</div>
<span>sss</span>

属性选择器

通过元素的属性选中元素进行修饰。

要求：只对提交按钮进行修饰
格式：元素名[属性名=属性值]{}  可以只写属性名而不写属性值， 表示选中有该属性的元素  如： input[type="submit"]{}<input type="text" /><input type="password" /><input type="submit" />

相邻兄弟选择器
1. 如果两个元素具有相同的父元素，并且是紧挨着的，这两个元素就是相邻兄弟元素，可以通过兄元素A选中第元素B
```
要求： 选中同一div中与span紧邻的后一个元素
格式： 大哥+小弟 如：#s1+span{}<div><span id="s1">ss</span><span>s22</span>
</div>
```
伪元素选择器
1. 伪元素选中的不单单是元素的本身，而是选中不同状态下的同一元素
2. 状态：
  1. :link –> 表示元素未被点击时的状态
  2. :hover –> 表示鼠标悬停在元素上时的状态
  3. :active –> 表示被点击时的状态
  4. :visited –> 表示被点击之后的状态
```
要求：对超链接不同状态的样式进行修饰
css: a:link{}a:hover{}a:active{}a:vidited{}html:  <a href="#">超链接</a>
```

五、外边距、边框、内边距

外边距： margin

1. margin-top:上边距
2. margin-left: 左边距
3. margin-bottom ：下边距
4. margin-right: 右边距
5. margin：1px 2px 3px 4px ; /*上 右 下 左*/
6. margin：1px 2px ; /*上下  左右*/
7. margin：1px;  /*上下左右*/
8. 注意：垂直外边距合并的现象:外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

边框：border

1. border: 5px solid green;
2. border-top: 5px solid green;
3. border-bottom: 5px solid green;
4. border-left: 5px solid green;
5. border-right: 5px solid green;

内边距： padding

1. padding-top: 20px;
2. padding-left: 20px;
3. padding-bottom: 20px;
4. padding-right: 20px;
5. padding: 20px 1px 2px 4px; /* 上 下 左 右 */
6. padding: 20px 2px;/*上下 左右*/
7. padding: 20px;/*上下左右*/

六、常用CSS属性

元素类型的补充
1. 块级元素
  1. 默认情况下, 块级元素可以独占一行
  2. 块级元素可以设置宽和高
  3. 如果不设置宽度: 其中宽是默认填满父元素, 高是由内容决定(由内容撑起来)
  4. 如果设置, 就是设置的宽和高.给块级元素设置的外边距/边框/内边距都会起作用
2. 行级元素
  1. 默认情况下, 多个行内元素可以处在同一行
  2. 不可以设置宽和高, 其中宽和高由内容决定
  3. 给行内元素设置的左右外边距/边框/内边距都会起作用, 但是上下外边距将不会起作用!
display属性 – 设置元素的显示方式
1. block: 块级元素的默认值
2. inline: 行内元素的默认值
3. inline-block: 既具备行内元素的特性(可以同行显示), 也具备块级元素的特性(可以设置宽高)
4. none: 用来隐藏一个元素, 这种方式的隐藏是真的隐藏了, 元素在原位置不再占用空间
5. visibility: hidden 这种方式也可以隐藏一个元素, 但是这种隐藏只是元素不显示了, 在原位置仍然占用空间（很少用到）
text-aglin属性 – 设置元素中文本水平对齐方式
1. left ：默认左对齐
2. right ：右对齐
3. center：居中对齐
4. justify：两端对齐
字体属性
1. font-size：字体尺寸
2. font-weight：字体加粗
3. font-family：字体样式
4. color：字体颜色
5. line-height：行高
6. text-decoration：下划线
背景属性
1. background-color：背景颜色设置
2. background-image：背景图片设置
3. background-repeat：设置背景图像是否及如何铺排
4. background-position：设置或检索对象的背景图像位置

大数据WEB阶段（三）CSS相关推荐

大数据WEB阶段 TransientDateAccessResourceException
大数据WEB阶段 TransientDateAccessResourceException 一 . 分析如果数据库保存的字段有时间 , 但是没有给该字段赋值时 ,则该字段默认是0000-00-00 ...
大数据WEB阶段（九）Servlet+Request
Servlet与Request 一.概述 Servlet 是sun公司提供的一门用于开发动态web资源的技术按照这套规范写出来的servlet可以放置在web应用中在servlet容器中运行 . 开 ...
大数据WEB阶段（六）MySql详解（一）
MySql(二) 一.概述什么是数据库数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,简而言之就是存储数据的仓库. 数据库的分类层次式数据库.网络式数据库.关系型数据库数 ...
大数据WEB阶段（六）MySql详解（二）
MySql详解(二) 一.分组查询语法: select col_name1,col_name2... from tb_name group by having ...; 练习: 执行下面的SQL,创 ...
大数据WEB阶段（十）Response、ServletConfig、ServletContext、资源跳转三种方式
Response.ServletConfig.ServletContext.资源跳转三种方式 - (一)Response 一.Response概述在doGet和doPost方法的参数中,HttpSe ...
大数据WEB阶段Spring框架（三）声明式事务处理
Spring整合JDBC-声明式的事务处理一.Spring整合JDBC步骤导入jar包编写数据库配置文件也可以将数据库配置信息单独配置后引入Spring容器中代码中使用二.Spring框架 ...
大数据WEB阶段总结
一.概述 HTTP协议 web容器 - Tomcat 静态web资源 - 本质上是文件 html css js 图片音频视频 flash- 动态web资源 - 本质上是程序 Servelt JSP ...
大数据WEB阶段 Maven与SSM框架整合
Maven整合SSM框架零. 目录 Maven整合SSM 常见的问题以及一些优化一. Maven整合SSM 创建webapp工程修改jdk和编译器配置pom.xml文件并在pom.xml文 ...
大数据WEB阶段Maven安装配置与使用
Maven 零.目录 Maven简介 Maven 的安装与配置创建Maven工程创建maven-web工程搭建私服使用本地资源库阿里私服 maven命令上传本地工程到私服中 maven-w ...

大数据WEB阶段（三）CSS

CSS

一、概述

二、在html中引入css样式的方式

三、div、span、p标签

四、选择器

五、外边距、边框、内边距

六、常用CSS属性

大数据WEB阶段（三）CSS相关推荐

最新文章

热门文章

大数据WEB阶段（三）CSS

CSS

一、概述

二、在html中引入css样式的方式

三、div、span、p标签

四、选择器

五、外边距、边框 、内边距

六、常用CSS属性

大数据WEB阶段（三）CSS相关推荐

最新文章

热门文章

五、外边距、边框、内边距