JavaWeb ----- CSS

css：页面美化和布局控制

• 1.概念：层叠样式表
  层叠：多个样式可以作用在同一个html的元素上，同时生效
• 2.好处：

   1.功能强大
   2.将内容展示和样式控制分离
         *降低耦合度，解耦
         *让分工写作更容易
         *提高工作效率

• 3.css的使用：css与html结合方式

1.内联样式 ： 在标签内使用style属性指定css代码 如：<div style="color:red;">hello css</div>

2.内部样式 ：在head标签内，定义style标签，style标签的标签内容就是css代码

3.外部样式 ：定义css资源文件 *在head标签内，定义link标签，引入外部的资源文件

注意：

1. 1，2，3种方式 css作用范围越来越大
2. 1方式不常用，2，3常用
3. 3种格式可以写为：

  <style>
  @import "css/a.css";
   </style>``

css语法：

格式：
选择器{
属性名1：属性值1；
属性名2：属性值2；
… }

选择器：筛选具有相似特征的元素
注意：每一对属性需要使用；隔开，最后一对属性可以不加；

分类：

          1.基本选择器
                 1.id选择器，选择器具体的id属性值的元素
                         语法：#id属性值{}
                 2.元素选择器：选择具有相同标签名称的元素
                        语法：标签名称{}
                        注意：id选择器优先级高于元素选择器
                 3.类选择器：选择具有相同的class属性值的元素。
                         语法：.class属性值{}
                         注意：类选择器优先级高于id选择器
           2.扩展选择器：
                1.选择所有元素：
                      语法：  *{}
                2.并集选择器：
                     选择器1，选择器2{}
                3.子选择器：筛选选择器1元素下的选择器2元素
                     语法：   选择器1  选择器2{}
                4.父选择器：
                     语法：   选择器1  >选择器2{}
                5.属性选择器：选择元素名称，属性名=属性值的元素
                    语法：   元素名称【属性名=“属性值”】{}
                6.伪类选择器：选择一些元素具有的状态
                    语法：元素：状态{}
                    如： <a>
                         状态：
                              link  ：初始化的状态
                              visited:被访问过的状态
                              active：正在访问的状态
                              hover：鼠标悬浮状态

属性

1.字体、文本
font-size:字体大小
color：文本颜色
text-align:对其方式
line-height:行高
文本的对齐方式
text-align:center:居中
text-align:right:两端对齐
text-align:justify:每一行被展开为宽度相等，左，右外边距是对齐
文本修饰：
text-decoration 用来设置或删除文本的装饰
主要用来删除链接的下划线

a {text-decoration:none;}

文本转换

文本缩进

p {text-indent:50px;}

css字型:(常用字体)

p{font-family:"Times New Roman", Times, serif;}

字体样式：

字体大小：

h1 {font-size:40px;}
px/16=em
h1 {font-size:2.5em;} /* 40px/16=2.5em */
body {font-size:100%;}

2.背景
background:（可以简写）

background-color

1.十六进制
2.RGB
3.颜色名称

background-image
body {background-image:url('paper.gif');}
background-repeat:repeat-x;只在水平方向平铺
background-repeat:no-repeat;不平铺
background-position:right top;改变图像在背景中的位置
background-repeat
background-attachment
background-position

3.边框
border：设置边框，复合属性
边框样式：

4.尺寸
width:宽度
height:高度
5.盒子模型：控制布局
margin：外边距
padding：内边距
默认情况下内边距会影响整个盒子的大小
box-sizing:border-box；设置盒子的属性，让width和height就是最终盒子的大小
float：浮动

left
right
clear:both;

6.链接

7.列表
无序列表

有序列表

不同的列表项标记

1.圆的
2.方的
3.罗马
4.小写字母
作为列表项标记的图像

ul
{
    list-style-image: url('sqpurple.gif');
}

8.outline轮廓
在border外，
1.outline
2.outline-color
3.outline-style
4.outline-width

9.改变一个元素显示
列表项显示为内联元素

li {display:inline;}

span元素作为块元素

span {display:block;}

10.定位position

1. HTML 元素的默认值。
2. 相对定位元素的定位是相对其正常位置。
3. 元素的位置相对于浏览器窗口是固定位置。 即使窗口是滚动的它也不会移动。
4. 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。
5. position: sticky; 基于用户的滚动位置来定位。
6. z-index
   
   10.Overflow
   
   11.组合选择符
   

12.导航栏
13.下拉菜单
14.提示工具
15.图片廊
16.渐变：

• 1.从上到下的线性渐变 background-image: linear-gradient(#e66465, #9198e5);
• 2.从左到右 background-image: linear-gradient(to right, red , yellow);
• 3.对角 background-image: linear-gradient(to bottom right, red, yellow);

17.文本效果
1.添加标题阴影

h1
{
    text-shadow: 5px 5px 5px #FF0000;
}

2.设置盒子阴影

div {
    box-shadow: 10px 10px 5px #888888;
}

3.使用粗体文本

font-weight:bold;

18.按钮
19.分页
20.弹性盒子