码迷,mamicode.com
首页 > Web开发 > 详细

HTML和CSS(二)

时间:2020-06-26 18:45:34      阅读:61      评论:0      收藏:0      [点我收藏+]

标签:影响   方式   名称   pad   格式   初始   提高   div   优先级   

一、CSS:页面美化和布局控制

1. 概念

CSS即Cascading Style Sheets 层叠样式表,是表现HTML或XHTML文件样式的计算机语言 ,包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等的设定

  • 层叠:多个样式可以作用在同一个html的元素上,同时生效

使用CSS的优点:

  • 功能强大
  • 减少网页的代码量,增加网页的浏览速度,节省网络带宽
  • 将内容展示和样式控制分离
    • 降低耦合度。解耦
    • 让分工协作更容易
    • 提高开发效率

CSS的使用

  • CSS的使用:CSS与html结合方式

    • 内联样式:使用style属性设置CSS样式仅对当前的HTML标签起作为,并且是写在HTML标签中的 ,不能起到内容与表现相分离,本质上没有体现出CSS的优势,因此不推荐使用

      • 使用style属性引入CSS样式
      • 如:<div style="color:red;">hello css</div>
    • 内部样式:

      • 在head标签内,定义style标签,style标签的标签体内容就是css代码

      • 优点:方便在同页面中修改样式

      • 缺点:不利于在多页面间共享复用代码及维护,对内容与样式的分离也不够彻底

      • 如:

      • <style>
        div{
        	color:blue;
        }
        </style>
        
        <div>hello css</div>
        
    • 外部样式:CSS代码保存在扩展名为.css的样式表中 ,HTML文件引用扩展名为.css的样式表

      • 定义css资源文件

      • 在head标签内,定义link标签,引入外部的资源文件

      • 如: a.css文件:

      • div{
        	 color:green;
        }
        <link rel="stylesheet" href="css/a.css">
        <div>hello css</div>
        <div>hello css</div>
        
    • CSS样式优先级 :行内样式>内部样式表>外部样式表

      • 就近原则:越接近标签的样式优先级越高
    • 注意:

      • 1,2,3种方式,css作用范围越来越大

      • 1方式不常用,后期常用2,3种方式

      • 第三种方式,即引入外部样式可以有另一种写法:

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

css语法

  • 格式:

    • 选择器 {
      			属性名1:属性值1;
      			属性名2:属性值2;
      			...
      		}
      
    • 选择器:筛选具有相似特征的元素

    • 注意:

      • 每一对属性需要使用隔开,最后一对属性可以不加
选择器
  • 选择器:筛选具有相似特征的元素
    • 分类:
      • 基础选择器:
        • id选择器:选择具体的id属性值的元素。建议在一个html页面中的id值唯一
          • 语法: 标签名称{}
          • 注意:id选择器优先级高于元素选择器
        • 元素选择器:选择具有相同标签名称的元素
          • 语法: 标签名称{}
          • 注意:id选择器优先级高于元素选择器
        • 类选择器:选择具有相同的class属性值的元素。
          • 语法:.class属性值{}
          • 注意:类选择器选择器优先级高于元素选择器
      • 扩展选择器:
        • 选择所有元素:
          • 语法: *{}
        • 并集选择器:
          • 选择器1,选择器2{}
        • 子选择器:筛选选择器1,元素下的,选择器2元素
          • 语法: 选择器1 选择器2{}
        • 父选择器:筛选选择器2,的父元素——选择器1
          • 语法: 选择器1 选择器2{}
        • 属性选择器:选择元素名称,属性名=属性值的元素
          • 语法: 元素名称[属性名="属性值"]{}
        • 伪类选择器:选择一些元素具有的状态
          • 语法:元素:状态{}
          • 如:<a>,状态:
            • link:初始化的状态
            • visited:被访问过的状态
            • active:正在访问状态
            • hover:鼠标悬浮状态
属性
  • 字体、文本
    • font-size:字体大小
    • color:文本颜色
    • text-align:对其方式
    • line-height:行高
  • 背景:
    • background:
  • 边框
    • border:设置边框,符合属性
  • 尺寸:
    • width:宽度
    • height:高度
  • 盒子模型:控制布局
    • margin:外边距
    • padding:内边距
      • 默认情况下内边距会影响整个盒子的大小
      • box-sizing: border-box; 设置盒子的属性,让width和height就是最终盒子的大小
    • float:浮动
      • left
      • right

HTML和CSS(二)

标签:影响   方式   名称   pad   格式   初始   提高   div   优先级   

原文地址:https://www.cnblogs.com/lf-637/p/13195488.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!