JavaWeb ----- CSS

2021/7/18 20:35:06

本文主要是介绍JavaWeb ----- CSS,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

css:页面美化和布局控制

  • 概念:层叠样式表
    层叠:多个样式可以作用在同一个html的元素上。同时生效
  • 好处
    1.功能强大

    2.将内容展示和样式控制分离
          降低耦合度,解耦
          让分工写作更容易
          提高工作效率
  • css的使用:css与html结合方式

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

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

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

注意

  • 1,2,3种方式 css作用范围越来越大
  • 1方式不常用,2,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:行高

  2. 背景
    background:

  3. 边框
    border:设置边框,复合属性

  4. 尺寸
    width:宽度
    height:高度

  5. 盒子模型:控制布局
    margin:外边距
    padding:内边距
    默认情况下内边距会影响整个盒子的大小
    box-sizing:border-box:设置盒子的属性,让width和height就是最终盒子的大小

  6. float:浮动

left

right



这篇关于JavaWeb ----- CSS的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程