一、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. jenkins集群(二)(master --> slave) -- allure自动化测试报告部署

    一.前提 1.环境 1)已经部署好了jenkins环境,包括jenkins的“全局工具配置”也配好了. 2.master与slave的简单的概念 1)master:jenkins部署所在的机器 2)s ...

  2. http与https的简单比较

    一.概念 1.HTTP:是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准(TCP),用于从WWW服务器传输超文本到本地浏览器的传输协议,它可以使浏览器更加高效,使网络传输减 ...

  3. java动态代理——字段和方法字节码的基础结构及Proxy源码分析三

    前文地址:https://www.cnblogs.com/tera/p/13280547.html 本系列文章主要是博主在学习spring aop的过程中了解到其使用了java动态代理,本着究根问底的 ...

  4. 利用Python的装饰器一键开启多线程

    记录一下自己写的烂代码 import time import threading def WithThread(obj): """这是一个开启线程的装饰器"&q ...

  5. jmeter跨线程组session保持

    @@@@@@@@@@@@@@@ 是金子早晚会被挖光的 http请求由于无状态的特性,所以在请求时需要带上身份信息,关于session和cookie的验证机制会在其他笔记中再记录,这里不讨论. 心路历程 ...

  6. LQB201803乘积尾零

    果然是练思维呀!!要是我的话估计就能挨个算一算呜呜呜 分解成 2和5相乘的式子 #include <iostream> using namespace std; //快速幂运算 int m ...

  7. PHP filegroup() 函数

    定义和用法 filegroup() 函数返回指定文件的组 ID. 如果成功,该函数返回指定文件所属组的 ID.如果失败,则返回 FALSE. 语法 filegroup(filename) 参数 描述 ...

  8. PHP mysqli_rollback() 函数

    关闭自动提交,做一些查询,提交查询,然后回滚当前事务: <?php 高佣联盟 www.cgewang.com // 假定数据库用户名:root,密码:123456,数据库:RUNOOB $con ...

  9. SpringCloud系列之客户端负载均衡Netflix Ribbon

    1. 什么是负载均衡? 负载均衡是一种基础的网络服务,它的核心原理是按照指定的负载均衡算法,将请求分配到后端服务集群上,从而为系统提供并行处理和高可用的能力.提到负载均衡,你可能想到nginx.对于负 ...

  10. [转] SpringBoot返回json 数据以及数据封装

    作者:武哥     来源:武哥聊编程   https://mp.weixin.qq.com/s/QZk0sKxBX4QZiCTHQIA6pg 1. Spring Boot关于Json的知识点 在项目开 ...