一、CSS(层叠式样式表)，决定页面怎么显示元素
　　1、引入方式：

  • 行内样式，在当前标签元素中直接使用 style 的属性。
  • 内嵌方式，在<head>中写样式；
  • 外链式，<link>引入外部CSS文件；使用@import 在<haed></head> 之间引用。（需要XX.css）

　　2、优先级：行内模式>内嵌模式>外链式
二、CSS语法：
　　1、内嵌式：
　　　　选择器{属性1：value1；属性2：value2；}
　　　　　　注释 /* */
　　　　选择器
　　　　第一种情况：标签名，影响其他同类型的标签；

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        div {

        color:red;

        text-align:center;

        }

    </style>

</head>

<body>

    <div>我是黑客</div>

</body>

</html>

　　　　第二种情况；id 选择器

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        #hacker

        {

            color: green;

            text-align: center;

        }

    </style>

</head>

<body>

    <div id="hacker">我是黑客</div>

</body>

</html>

　　　　第三种情况： class ，可以在不同的元素中去使用

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        .test

        {

            color: red;

            text-align: center;

        }

    </style>

</head>

<body>

    <h1 class="test">这是一级标题</h1>

    <p class="test">这是段落</p>

</body>

</html>

　　2、外链式

　　需要XX.css

　　　　例：mystyle.css

        #hacker{

            color: red;

            text-align: center;

        }
  • <link>：
<!DOCTYPE html>

<html>

<head>

    <title></title>

    <link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

<body>

    <div id="hacker">我是黑客</div>

</body>

</html>
  • @import
<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        @import url(css/mystyle.css)

    </style>

</head>

<body>

    <div id="hacker">我是黑客</div>

</body>

</html>

三、常用样式：

  • 后背景：backgroup-color backgroup-image
  • 字体：color size text-align(对齐方式) text-indet(字体)
  • 盒子模型：

　　　　Margin：外边框
　　　　Border：边框
　　　　Padding：内边框
　　　　Content：显示数据的地方（文本、图片等）

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        #hacker{

            background-color: lightgrey;

            width: 300px;

            border: 20px solid red;

            padding: 10px;

            margin: 20px

        }

    </style>

</head>

<body>

    <div id="hacker">我是黑客</div>

</body>

</html>

　　效果图：

四、分组和嵌套

　　1、分组

    <!DOCTYPE html>

    <html>

    <head>

        <title></title>

        <meta charset="utf-8">

        <style type="text/css">

            h1,h4,p{        <!--分组-->

                color :green;

            }

        </style>

    </head>

    <body>

        <h1>这是一级标题</h1>

        <h4>这是四级标题</h4>

        <p>这是正文</p>

    </body>

    </html>

　　2、嵌套

　　.marked{} class="marked" 的标签
　　.marked p{} 为所有class="market" 元素内的 p 元素指定一个样式。
　　p.marked{} 只要是p标签，并 class=“marked”才会被更改样式。

五、显示

　　div.hiden{visibility:hidden;} 将div元素隐藏掉，这种方式依然存在其原有的特征。

　　div.hiden{display: none;} 这种方式直接隐藏标签，其特征也没有了。

六、定位

　　Position:static(不受top、boottom、left、right 的影响)

　　relative(相对定位元素的定位是相对其正常位置)

　　fixed(位置固定)

　　absolute(绝对定位的元素的位置相对于最近的以定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>)

　　sticky

七、对齐

　　text-align:center 文字居中

　　margin:auto 元素居中、图片居中

笔记：CSS基础的更多相关文章

  1. 学习笔记—CSS基础

    概念 CSS 指层叠样式表(Cascading Style Sheets), 是一种标记语言,属于浏览器解释型语言,可以直接由浏览器执行,不需要编译. HTML只负责网页的内容,标签尽量只负责语意不负 ...

  2. Html和Css学习笔记-css基础知识

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...

  3. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  4. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

  5. amazeui学习笔记--css（基本样式2）--基础设置Base

    amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...

  6. HTML&CSS基础学习笔记—创建列表

    创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...

  7. 学习笔记（一） HTML+CSS基础课程

    这个周把慕课网的<HTML+CSS基础课程>课程学完,内容都是非常非常基础的,不过还是学到了几个小知识点,记下来先. <a>超链接发送邮件 直接上把他的图片给挪过来了,我就不打 ...

  8. CSS基础知识之position

    最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...

  9. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  10. jQuery:自学笔记(1)——基础入门

    jQuery:自学笔记(1)——基础入门 认识JQuery 1.jQuery概述 jQuery是一个快速.小巧 .功能丰富的JavaScript函数库.它可以实现“写的少,做的多”的目标. jQuer ...

随机推荐

  1. python 结合redis 队列 做一个例子

    结合redis 队列 做了一个例子 #!/usr/bin/env python # coding: utf-8 # @Time : 2018/12/21 0021 13:57 # @Site : # ...

  2. 学Python入门应该先学什么？看完本文你就知道了

    学Python应先从Python开发基础部分入手:1.如学习Python语言介绍2.环境安装3.Python基本语法4.基本数据类型5.二进制运算6.来流程控制.7.字符编码.文件处理8.数据类型9. ...

  3. vue.js全局组件和局部组件区别

    在id=‘#app’,加入<pl>标签,但也访问不了局部chil组件: 在id=‘#div0’,加入<as>标签,但能访问到全局组件

  4. iOS APP下载安装时，如果出现此时无法下载安装APP的字样时，一些解决思路

    1.在iosAPP下载安装时,如果出现此时无法下载安装APP的字样时,可能是苹果系统进行了支持更新,并需要我们确认条约.至于如何判断是否是苹果系统进行了更改,只需要我们进入开发者账号,进入我的账户(A ...

  5. Fortify Audit Workbench 笔记索引

    Password Management: Password in Configuration File(明文存储密码) https://www.cnblogs.com/mahongbiao/p/124 ...

  6. SpringBoot整合Mail发送邮件&发送模板邮件

    整合mail发送邮件,其实就是通过代码来操作发送邮件的步骤,编辑收件人.邮件内容.邮件附件等等.通过邮件可以拓展出短信验证码.消息通知等业务. 一.pom文件引入依赖 <dependency&g ...

  7. 设置x 轴斜体(每次我都百度,这次单独为它发一个)

    plt.xticks(rotation = 45) 2020-06-07

  8. PHP系列之钩子

    PHP 提供的钩子 PHP 和 Zend Engine 为扩展提供了许多不同的钩子,这些扩展允许扩展开发人员以 PHP userland 无法提供的方式控制 PHP 运行时. 本章将展示各种钩子和从扩 ...

  9. 如何使用k3OS和Argo进行自动化边缘部署？

    本文转自边缘计算k3s社区 前 言 随着Kubernetes生态系统的发展,新的技术正在被开发出来,以实现更广泛的应用和用例.边缘计算的发展推动了对其中一些技术的需求,以实现将Kubernetes部署 ...

  10. C/C++编程笔记：C语言入门知识点（二），请收藏C语言最全笔记！

    今天我们继续来学习C语言的入门知识点 11. 作用域规则 任何一种编程中,作用域是程序中定义的变量所存在的区域,超过该区域变量就不能被访问.C 语言中有三个地方可以声明变量: 在函数或块内部的局部变量 ...