首页 > 其他分享 >CSS概述以及与HTML结合方式

CSS概述以及与HTML结合方式

时间:2022-10-26 10:23:46浏览次数:57  
标签:方式 样式 HTML 概述 CSS hello css

CSS-概述

概念:Cascading Style Sheets  层叠样式表

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

  好处:

    1.功能强大

     2.将内容展示和样式控制分离,

      1.降低耦合度,解耦

      2.让分工协作更容易

      3.提高开发效率

    

 

CSS-与HTML结合方式

1.内联样式:

    <!--
        内联样式
            在标签内使用style属性指定css代码
     -->
    <div>hello css</div>

2.内部样式

<head>
    <meta charset="UTF-8">
    <title>css与html结合方式</title>
    <style>
        div{
            color: red;
        }

    </style>
</head>
<body>
    <!--
        内部样式
            在head标签内,定义style标签,style标签的标签体内容就是css代码
     -->
    <div>hello css</div>
</body>

3.外部样式

<head>
    <meta charset="UTF-8">
    <title>css与html结合方式</title>
    <!--引入外部的资源文件-->
    <link rel="stylesheet" href="css/a.css">
</head>
<body>
    <!--
        外部样式
            定义css资源文件
            在head标签内,定义link标签,引入外部的资源文件
   -->
    <div>hello css</div>


</body>

外部文件:

div{
    color: blue;
}

 

注意:

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

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

  3,3种格式可以写为:引入外部资源方式

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

 

标签:方式,样式,HTML,概述,CSS,hello,css
From: https://www.cnblogs.com/qihaokuan/p/16827341.html

相关文章

  • HTML元素大全(2)-表单
    01、<form>表单<form>表单是比较重要的HTML元素,块元素,主要作用是向服务端提交数据。结合表单元素input使用,通过内部的button按钮提交(type="submit")表单数据。元素/......
  • HTML标签表单标签表单项select&textarea以及注册页面
    HTML标签-表单标签-表单项select&textareaselect:下拉列表子元素:option:指定列表项selected:默认选项textarea:文本域:cols:每一行有多少个字符ro......
  • HTML标签_文件标签HTML标签_文本标签1HTML标签_文本标签2
    HTML标签_文件标签html:html文档的根标签 head:头标签。用于指定html文档的一些属性。引入外部的资源title:标题标签body:体标签......
  • 【CSS3】border-color
     border-color值描述border-top-color边框的上面border-right-color边框的右面border-bottom-color边框的下面border-left-color边框的左面......
  • 【CSS3】border-image
     border-image值描述border-image-source 指定border的背景图的urlborder-image-slice设置图片如何切割的属性,非定位border-image-width定义border-ima......
  • css让层水平垂直居中
    .myDiv{position:absolute;top:50%;left:50%;transform:translateX(-50%)translateY(-50%)}在父窗体上声明<div......
  • 【转】VUE 动态绑定 html 的 class
            ......
  • 【HTML&CSS】唉,我以为行内元素都不能设置宽高
    又是面试驱动学习的一天常见的行内元素有哪些?abr img input label object span select textarea行内的置换元素是可以设置宽高的,置换元素有哪些呢?让我们来......
  • 零基础CSS从入门到精通
    资源简介这一套经典的CSS视频教程,带你从入门到深入学习web前端课程。下载地址:https://pan.baidu.com/s/1jDV__YNpg1v_3FFkH6l5Ng提取码:z94n......
  • 好看的CSS效果
    好看的效果1.复选框:思路是使用复选框并进行隐藏,然后自己写一个div,并且用:before来放进div复选框这,不少地方采用绝对定位,在:checked时更改对应颜色。<divclass=......