(day02)超链接元素+css样式(选择器+背景+文本格式+表格样式+列表样式)

2019.07.31(day02)

java web

-超链接元素
   分为两类:
     a标记超链接:
         属性:href="超链接的目的地"
             target="目标的打开方式"
                 _black:在一个新空白浏览器窗口打开
                 _self:在当前浏览器窗口打开
                 其他frame的名字
     a标记锚点:
         定义锚点:
             网页中显示文字
         链接到锚点
             网页中显示文字

在body体中显示表格内容:
-

表格元素
    border:边框
    width:宽度
    height:高度
    align:对齐方式
    cellpadding:单元格边框与内容之间的距离(可以是固定像素值,也可以是百分比)
    cellspacing:单元格之间的距离(可以是固定像素值,也可以是百分比)
-行元素
    align:水平对齐方式    left    cneter    right
    valign:垂直对齐方式    top        middle    bottom
- 表头    
- 表格内容
- 表尾

在body中显示表单:
    用来显示和收集信息,并把收集的信息提交给服务器
    表单可以由两个部分组成:
        
元素
        表单控件元素

-元素,专门用来定义一个表单的
    action:表单要提交到哪个目的地(可以是本地,也可以是服务器)
    method:表单的提交方式
        post提交:传递数据量大,地址栏不显示,数据安全
        get提交:传送的数据量小,地址栏显示,数据不安全
    enctype:表单提交的编码方式

-表单控件:
     文本框
     密码框
     单选框
     多选框
     按钮
     提交按钮
     重置按钮
     隐藏
     文件框
    其他表单控件
     下拉列表框
     多行多列的文本框

    元素的属性
        type:类型
        name:名称
        value:值
        maxLength:限制输入字符数
        readyonly:设置为只读

    单选框和多选框的常用属性
        value:值
        name:名称
        checked:设置默认选中

    按钮的属性
        value:按钮上显示的字

css样式:    
    层叠样式(cascading style sheet)
    css样式是用来给html化妆

如何使用样式

1.内联样式/行内样式:
    样式定义在单个的html元素中
    比如:
        我是一只小小鸟
    特点:只能在当前的元素中使用
    
2.内部样式:
    样式定义在html页面的中
    比如:
        
            
        
    特点:作用于当前整个页面

3.外部样式/外联样式
    将定义一个外部的css样式文件,以.css结尾
    在html中引入这个css文件
    比如:
        style.css
            span{
                color:red;
            }
            ...
        demo.html
            
                
                
            

css样式语法规范:
css可以由多个样式规则组成
   每个样式的规则有两个部分选择器和样式声明
   比如:
   h1{
           color:red;
           font-weight:bold;
       }
   
   h1是选择器
   样式必须用大括号括起来
   大括号中所有样式,都必须用";"分号间隔,多个样式是样式叠加
   样式包括两部分,样式的属性和样式的值
   样式的属性和样式的值用":"冒号间隔

css样式规则特性:
-继承性:父元素的css的声明可以被子元素继承
-层叠性:同一元素存在多个css,不冲突,就叠加
-优先级:同一个元素存在多个css,有冲突的,优先级高的生效
   浏览器缺省设置   外部样式或内部样式    内联样式
   由低到高
   
css选择器:
1.元素选择器
  通过元素的名称来选择css作用的目标
  比如  span{
          /*所有的span的字都是红色*/
          color:red;
        }

2.类选择器:
  类选择器允许以一种独立于文档元素的方式来指定样式
  语法:
      .className{样式的定义}
  所有能够附带class属性的元素都可以使用此样式声明
  
  如果页面中有过个不同的元素需要重用同样的样式效果
  可以是用类选择器
  比如:
     .divclass{
        font-weight:bold;
     }
    

测试div

     
补充:
  可以将类选择器和元素选择器结合起来使用,
  以实现对某种元素中不同演示的细分控制
  语法:
     元素选择器.className{}
  比如:
  h1.cn1{
    /*cn1只能在h1的元素中使用*/
  }

3.id选择器:
  id选择器以一种独立于文档元素的方式来指定样式
  他作用于id属性值
  语法为:
     #id{
        样式定义
     }
  比如:
    #divid{
        background-color:blue;
    }
  
   


      
4.派生选择器
-子选择器:用于选择指定标签的第一代子元素 
  符号是>
  语法:
     某个选择器>某个子元素的名称{}
  比如:
       .food>li{
             border:1px solid red;
       }

-后代选择器:用于选择指定标签元素下后辈元素
  符号是空格   
  语法:
     某个选择器 某个子元素的名称{}
  比如:
      .food li{
        border:1px solid red;
      }
   
5.伪类选择器:
-伪类用于设置同一个元素的不同状态下的样式
-常用的伪类:
 :link 向未被访问的超链接添加样式
 :visited 向已经访问的超链接添加样式
 
 :active 向激活的元素添加样式
 :hover 当鼠标悬停至元素上方时,向该元素添加样式
 :focus 当元素获取焦点时,向该元素添加样式 

border样式:
border属性是用来设置元素的边框
四边设置:
   -border:width值 style值 color值;
   比如:
     border:1px solid  red;  
单边设置:
   border-left:width值 style值 color值;
   border-right:width值 style值 color值;
   border-top:width值 style值 color值;
   border-bottom:width值 style值 color值;

box盒子模型:处理元素框的内容,内边距,边框,外边框的方式


    

        这是演示盒子模型
    

  
/*演示盒子模型*/
.borderclass{
    border:1px solid red;
    width:200px;
}

.box{
    border:2px dotted green;
    width:70px;
    /*四边设置*/
    margin:30px;
    padding:10px;
}
.box1{
    border:2px dotted green;
    width:70px;
    /*单边设置 上右下左*/
    margin:10px 20px 30px 40px;
    padding:10px 20px 30px 40px;
    margin
}
.box2{
    border:2px dotted green;
    width:70px;
    /*单边设置 上下   左右*/
    margin:20px 30px;
    padding:20px 30px;
}
.box3{
    border:2px dotted green;
    width:70px;
    /*单边设置 当左右为auto时候,水平居中*/
    margin:20px auto;
    padding:20px 30px;
}
   
背景:
背景色:
  background-color:red;
  注意red还可以用#6位16进制数来替代
背景图片:
  background-image:url('图片的路径(相对或绝对)');  
  注意:
     默认值是none,表示没有没有背景图片
     如果设置图片就用url方式指定图片路径
     
  默认情况下,背景图片在水平和垂直方向上重复出现
  background-repeat属性可以控制背景图片的平铺效果
  background-repeat的取值:
   -repeat:在垂直方向和水平方向重复,
   -repeat-x:仅在水平方向重复
   -repeat-y:仅在垂直方向重复
   -no-repeat:仅显示一次
   
文本格式:
指定字体:
  font-family:value1,value2,value3;
  value指的是字体(前提当前系统中存在字体)
指定大小:
  font-size:value;
  value是一个具体像素值
指定加粗
  font-weight:normal/bold/100-900
文本颜色:
  color:value
  value是一个具体颜色的单词,也可以是一个#6位16进制数
文本排列
  text-align:left|right|center;
文本修饰:   underline  下划线
  text-decoration:none|underline;
行高:
  line-height:value
  value是一个具体的数值
首行文本缩进:
  text-indent:value
  value是一个具体的数值
  
表格样式:
  表格同样可以使用box模型(边框,内边距,宽,高)
  以及文本样式

表格特有的样式属性
  如果设置了单元格的边框,相邻单元格的边框会单独显示
  类似于双线边框
  border-collapse属性:合并相邻的边框
    设置是否将表格边框合并为单一边框
    属性的值:border-collapse:separate|collapse;
        
补充内容th:也是单元格,代表表头,表头的内容是黑体加粗居中  
   
   
页面元素定位:
  定义元素框相对于其正常位置应该出现的位置,
  或者相对于父元素,另一个元素甚至浏览器窗口本身的位置
-流定位(推荐)
  从上到下顺序排列,

是从上到下
  从左到右排列是从左到右
-浮动定位(推荐)
 让元素脱离普通的流定位
 将浮动元素放置在父元素的左边或右边
 浮动元素依旧位于父元素内
 浮动的框可以向左或向右移动,直到他的外边框边缘碰到父元素
 或另一个浮动的边框位置
 经常浮动定位做网页的布局
 float:none|left|right
-相对定位
-绝对定位
-固定定位  

列表样式:
  list-style-type属性用于控制列表中列表项的样式
  -无序列表ul:出现在各列表左边的原点
    取值:
    none  无符号
    disc  实心圆 默认
    circle 空心圆
    square  实心方块
  -有序列表ol:可能是字母,数字,或其他的计数体系符号
    取值:
    none   无标记
    dicimal   数字(1,2,3...)
    lower-roman 小写罗马(i,ii,iii...)
    upper-roman 大写罗马(I,II,III...)
  
  list-style-image属性使用图像来替换列表项的标记
  取值:
  list-style-image:url('图片的路径');
        

你可能感兴趣的:(笔记)

单元格元素
    align:水平对齐方式
    valign:垂直对齐方式
    width:宽度
    height:高度
    colspan:列合并
    rowspan:行合并
-
单元格元素(仅代表表头)
分区元素
-