CSS 指层叠样式表 (Cascading Style Sheets),样式定义如何显示 HTML 元素,样式通常存储在样式表中,外部样式表通常存储在 CSS 文件中

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

<!---->

    <style>

        #i1{

            background-color: #0d8ddb;

            width: 100px;

            height: 100px;

        }

    </style>

<!---->

    <link rel="stylesheet" href="2_demo.css">

</head>

<body>

<!--    增加css属性三种方式

        1.直接在div标签中写

        2.在<head></head>中写style标签，通过id选择器创建一个关系，通过'#'定位id

        3.在css文件2_demo.css中写样式表,通过在head中的link标签引入到当前的html中

        4.备注：id属性在一对<html></html>中只能出现一次

             <div>标签中的style属性优先级最高，其余优先级由高至低是取决于离<div>标签的远近

             展示4的效果需要注释<body>中的1，2，3 css文件中同样需要注释一下-->

<!---->

    <div style="background-color: #c6ffc6;width: 100px;height: 100px">第一种方式背景色</div>

<!---->

<!--    <div id="i1" style="background-color: #c6ffc6;width: 100px;height: 100px">第一种方式背景色</div>-->

<!---->

    <div id="i1">第二种方式背景色</div>

<!---->

    <div id="i2">第三种方式背景色</div>

</body>

</html>

选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*1*/

        #i1{

            background-color: rebeccapurple;

            width: 100px;

            height: 100px;

        }

        /*2*/

        .c1{

            background-color: rosybrown;

            width: 100px;

            height: 100px;

        }

        /*3*/

        .c2{

            width: 100px;

            height: 100px;

        }

        .i2{

            background-color: yellow;

        }

        .i3{

            background-color: green;

        }

        /*4*/

        div{

            background-color: #c6ffc6;

        }

        /*5*/

        div span{

            background-color: red;

        }

        /*6*/

        div[mh='strive']{

            background-color: blue;

            width: 100px;

            height: 100px;

        }

    </style>

</head>

<body>

<!----><!--    通过id选择器(不允许重复，唯一，一对html标签中只允许有一个id选择器)定位div标签-->

    <div id="i1">通过class选择器</div>

<!----><!--    通过class(可重复，可共用)选择器定位div标签-->

    <div class="c1">通过class选择器</div>

    <div class="c1">通过class选择器</div>

<!----><!--不同颜色相同宽高的class重复，id唯一,class选择器属性允许多个，用空格分割-->

    <div class="c2 i2">通过class1选择器</div>

    <div class="c2 i3">通过class1选择器</div>

<!--    4标签选择器 div没有宽，高，内容 在浏览器中显示就是一个点 肉眼看不见,所有的标签都是红色-->

    <div class="c2">123</div>

<!--    5层级选择器 用的较少-->

    <div class="c2">

        <span>

            层级选择器

        </span>

    </div>

<!--    6属性选择器(自定义的)-->

    <div mh="strive">自定义的</div>

</body>

</html>

web前端_css01的更多相关文章

  1. Web前端需要熟悉大学里【高大上】的计算机专业课吗？

    作为一名刚刚大学毕业,进入新的学习阶段的研究生,我必须说大学的专业课非常重要!不管你信不信,事实就是如此! 一.大学学习的专业课非常重要,它决定了我们能走到什么高度 前端的发展非常快,我常常觉得刚刚关 ...

  2. web前端开发分享-目录

    1. web前端开发分享-css,js入门篇 2. web前端开发分享-css,js进阶篇 3. web前端开发分享-css,js提高篇 4. web前端开发分享-css,js工具篇 5. web前端 ...

  3. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

  4. web前端的春天 or 噩梦

    「 微信应用号可以做什么」 简单说,微信"小程序"可以为开发者提供基于微信的表单.导航.地图.媒体和位置等开发组件,让他们在微信的网页里构建一个 HTML 5 应用.同时微信还开放 ...

  5. Web 前端开发精华文章推荐（jQuery、HTML5、CSS3）【系列十二】

    2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...

  6. 也许你需要点实用的-Web前端笔试题

    之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...

  7. 用grunt搭建web前端开发环境

    1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...

  8. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  9. [转载]Web前端开发工程师编程能力飞升之路

    [背景] 如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧:如果你是做了两三年web产品前端研发,迷茫找不着提高之路,看这篇文章吧:如果你是四五年的前端开发高手,没有难题能难得住你的 ...

随机推荐

  1. Numpy科学计算

    NumPy介绍   NumPy(Numerical Python)是一个开源的Python科学计算库,用于快速处理任意维度的数组. NumPy支持常见的数组和矩阵操作.对于同样的数值计算任务,使用Nu ...

  2. 面向对象编程 OOP

    OOP,Object Oriented Programming,原来就是面向对象的编程. 面向对象是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物. OOD,Object Or ...

  3. 微信小程序打开地图选择位置

    wx.getLocation({ type: 'wgs84', success(res) { const latitude = res.latitude const longitude = res.l ...

  4. Test：河北金力集团企业网集成

    三.网站建设部分(40分) 河北金力集团公文流转系统 1.项目需求: 河北金力集团是我省机械加工的龙头企业,主要从事矿山机械制造及各种机械零部件加工.企业有3个厂区,主厂区位于省高新技术开发区,3个分 ...

  5. Maximum path CodeForces - 762D

    大意: 3*n矩阵, 求从(1,1)->(3,n)路径最大点权和. 核心观察是每个点回头一定不会超过1, 这是因为只有三行, 若回头两格一定是$9$个位置全走, 显然可以找到一种只会头一格的方案 ...

  6. linux centos 安装mongoDB

    1.下载mongoDB 例如下载3.2.19 64位版本 https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-3.2.19.tgz ...

  7. ASP.NET Core[源码分析篇] - Authentication认证

    原文:ASP.NET Core[源码分析篇] - Authentication认证 追本溯源,从使用开始 首先看一下我们通常是如何使用微软自带的认证,一般在Startup里面配置我们所需的依赖认证服务 ...

  8. sql--left join,right join, inner join

    left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录inner join(等值连接) 只 ...

  9. Vue 路由拦截（对某些页面需要登陆才能访问）

    前言 做项目的时候有个需求,就是发现没有登录,竟然也可以进入我的主页,这样肯定是不能容忍的.于是就要让他进入主页的时候,加个判断是否有登录,若没有登录,则返回登录界面,登录成功后还可以跳转到之前进入的 ...

  10. this —— javascript

    目录 为什么要讨论this this是什么 如何改变this的指向 箭头函数中的this 为什么要讨论this 代码一: function fun1(){ var aa = 'I am aa'; co ...