概念

　　CSS 指层叠样式表（Cascading Style Sheets）， 是一种标记语言，属于浏览器解释型语言，可以直接由浏览器执行，不需要编译。

　　HTML只负责网页的内容，标签尽量只负责语意不负责样式。CSS 主要负责网页的样式，给网页进行布局，解决了内容与表现分离的问题。

　　CSS 可以重复使用，避免代码冗余。但依赖于HTML。

CSS的声明

内联样式（在 HTML 元素内部）

　　在 html 标签上使用 style 属性进行声明。此声明只作用于当前 html 标签。

　　拥有最高优先级。

<p style="color: blue;size: 34px">这是个内联样式</p>

内部样式表（位于 <head> 标签内部）

　　在 head 标签中使用 style 标签声明。此声明一般声明当前网页的公共样式或者给某个标签的单独样式。

    <!--声明CSS代码域-->

    <style type="text/css">

        p {

            color:yellow;

            size: 30px;

        }

    </style>

外部样式表

　　在 head 标签中使用 link 标签引入外部声明好的 css 文件。解决了不同网页间样式重复使用的问题。

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

　　

　　注意：内联样式的优先级最高。而内部样式表和外部样式表，若给同一标签定义样式，则谁后声明就执行谁。

    <!--样式表现为 外 部样式表定义的样式-->

    <style type="text/css">

        p {

            color:yellow;

            size: 30px;

        }

    </style>

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

    <!--样式表现为 内 部样式表定义的样式-->

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

    <style type="text/css">

        p {

            color:yellow;

            size: 30px;

        }

    </style>

CSS的选择器

标签选择器

　　标签名{ 样式名 : 样式值 ; ...}

　　会给当前网页内所有该标签增加相同的样式。

<head>

    <style type="text/css">

        /*标签选择器*/

       p {

            color: yellow;

            size:40px;

        }

    </style>

</head>

<body>

    <p>这是个黄色</p>

</body>

id选择器

　　#标签的id属性值{ 样式名 : 样式值 ; ...}

　　给某个指定的标签添加样式。id 属性不要以数字开头，一个 id 值最好只赋值一次。

<head>

    <style type="text/css">

        /*id选择器*/

        #red {

            color: red;

            size:40px;

        }

    </style>

</head>

<body>

    <p id="red">这是个红色</p>

</body>

类选择器

　　.类选择器名{ 样式名 : 样式值 ; ...}

　　给不同的标签添加相同的样式。类名的第一个字符不能使用数字。　　

<head>

    <style type="text/css">

        /*类选择器*/

        .ppp {

            color: red;

            size:40px;

        }

    </style>

</head>

<body>

    <p class="ppp">这是个红色</p>

    <p class="ppp">这是个红色</p>

</body>

通用选择器

　　* { 样式名 : 样式值 ; ...}

　　选择所有的 html 标签添加相同的样式。

        /*全部选择*/

        *{

            margin: 40px;

            color: orange;

        }

组合选择器

　　选择器1,选择器2,...{ 样式名 : 样式值 ; ...}

　　给不同选择器添加相同样式。

<head>

    <style type="text/css">

        /*组合选择器*/

        .ppp,#qqq {

            color:purple;

        }

    </style>

</head>

<body>

    <p class="ppp">这是个紫色</p>

    <p id="qqq">这是个紫色</p>

</body>

子标签选择器

　　选择器1 子标签选择器 ...{ 样式名 : 样式值 ; ...}

<head>

    <style type="text/css">

        /*子标签选择器*/

        .ggg a {

            color:green;

        }

        #bbb a {

            color: #000;

        }

    </style>

</head>

<body>

    <p class="ggg"><a href="#">这是绿色</a></p>

    <p id="bbb"><a href="#">这是黑色</a></p>

</body>

属性选择器

　　标签名【属性名=属性值】{ 样式名 : 样式值 ; ...}

　　给具备某属性的标签添加样式。

注意：

　　使用*选择器给整个页面添加基础样式

　　使用类选择器给不同标签添加基础样式

　　使用标签选择器给某类标签添加基础样式

　　使用id选择器、属性选择器、内联样式给某个具体的标签添加个性化样式

CSS常用样式

边框设置

　　border:5px solid red;

字体设置

　　font-size:10px;　　设置字体大小

　　font-family:"黑体";　　设置字体

　　font-weight:bold;　　设置字体加粗

字体颜色设置

　　color:颜色;　　

背景颜色设置

　　background-color：颜色;

背景图片设置

　　background-img:url(路径)

　　background-repeate:no-repeate;　　设置图片不重复

　　background-size:cover;　　设置图片平铺

高和宽的设置

　　width:

　　height:

浮动设置

　　float:left|right

行间距设置

　　line-height

盒子模型

div标签

　　块级标签，主要用来进行网页布局，会将其中的子元素内容作为一个独立的整体存在。

　　默认宽度是页面的宽地，但是可以设置。没有默认高度，但是可以撑开。

　　如果子元素设置了百分比的高或者宽，占据的是div的百分比，不是整个页面的。

盒子模型

　　CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充（内边距），和实际内容。

　　　　

　　外边距：margin

　　　　用来设置元素与元素之间的距离，上下左右均可单独设置。

　　　　margin:0px auto;　　上下外边距为0，左右居中

　　边框：border

　　　　用来设置元素边框的大小、形式和颜色。上下左右均可单独设置。

　　内边距：padding

　　　　设置内容和边框之间的距离，上下左右均可单独设置。

　　内容：

　　　　设置宽度和高度即可改变内容区域的大小。

CSS的定位

相对定位

　　position:relative

　　相对元素原有位置移动指定的距离，可以使用top、left、right、bottom来进行上下左右的偏移。

　　相对的是自己原本的位置，不改变其他元素位置。

　　注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位

　　position:absolute

　　可以使元素根据参照元素或已定位的父元素来进行移动。

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

　　绝对定位的元素会覆盖在其他框。

固定定位

　　position:fixed

　　将元素固定在页面的某个位置，不会随着滚动条的移动而改变位置。

　　元素的位置相对于浏览器窗口是固定位置。

注意

　　元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

　　z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

　　具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

学习笔记—CSS基础的更多相关文章

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

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

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

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

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

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

  4. amazeui学习笔记--css（常用组件11）--分页Pagination

    amazeui学习笔记--css(常用组件11)--分页Pagination 一.总结 1.分页使用:还是ul包li的形式: 分页组件,<ul> / <ol> 添加 .am-p ...

  5. amazeui学习笔记--css（常用组件9）--导航nav

    amazeui学习笔记--css(常用组件9)--导航nav 一.总结 1.导航基本使用:<ul> 添加 .am-nav class 以后就是一个基本的垂直导航.默认样式中并没有限定导航的 ...

  6. amazeui学习笔记--css（常用组件8）--列表list

    amazeui学习笔记--css(常用组件8)--列表list 一.总结 1.链接列表:就是多个链接在一起组成的列表, 使用 <ul> 结构嵌套链接列表,添加 .am-list.还是ui包 ...

  7. amazeui学习笔记--css（常用组件6）--图标Icon

    amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...

  8. amazeui学习笔记--css（常用组件1）--小徽章Badge

    amazeui学习笔记--css(常用组件1)--小徽章Badge 一.总结 1.am-badge:添加am-badge来声明小徽章对象 <span class="am-badge a ...

  9. amazeui学习笔记--css（HTML元素4）--图片image

    amazeui学习笔记--css(HTML元素4)--图片image 一.总结 1.响应式图片:随着页面宽度而变化 .am-img-responsive class. <img src=&quo ...

随机推荐

  1. Python并发编程之线程中的信息隔离（五）

    大家好,并发编程 进入第三篇. 上班第一天,大家应该比较忙吧.小明也是呢,所以今天的内容也很少.只要几分钟就能学完. 昨天我们说,线程与线程之间要通过消息通信来控制程序的执行. 讲完了消息通信,今天就 ...

  2. TCP连接的建立与释放(三次握手与四次挥手)

    TCP连接的建立与释放(三次握手与四次挥手) TCP是面向连接的运输层协议,它提供可靠交付的.全双工的.面向字节流的点对点服务.HTTP协议便是基于TCP协议实现的.(虽然作为应用层协议,HTTP协议 ...

  3. map和set的原理

    1)map:经过排序了的二元组的集合,map中的每个元素都是由两个值组成,其中的key(键值,一个map中的键值必须是唯一的) 是在排序或搜索时使用,它的值可以在容器中重新获取:而另一个值是该元素关联 ...

  4. 【转】浏览器输入URL后发生了什么

    转自:http://www.cnblogs.com/webdeve/p/7865520.html本文摘要: 输入网址 当我们在浏览器输入网址并回车后,一切从这里开始. 一.DNS域名解析 我们在浏览器 ...

  5. windows10系统终极净化方法

    去年购入一台华硕FL8000U,性能很是不错,但是硬件只能兼容win10,不支持win7(linux倒是可以,但是始终用不顺手),win10里面杂七杂八的确实很多,本人重度强迫症+洁癖+极简主义,所以 ...

  6. strace详解及实战

    详细参数: -c 统计每一系统调用的所执行的时间,次数和出错的次数等. -d 输出strace关于标准错误的调试信息. -f 跟踪由fork调用所产生的子进程. -ff 如果提供-o filename ...

  7. SVN使用指引（Windows）

    SVN使用指引(本地服务器为Windows) 原:http://wiki.open.qq.com/wiki/SVN%E4%BD%BF%E7%94%A8%E6%8C%87%E5%BC%95%EF%BC% ...

  8. jQuery 素材 缩略图轮播集合

    http://www.17sucai.com/pins/demo-show?id=27124 http://www.17sucai.com/pins/demo-show?id=4712  楼盘详情缩略 ...

  9. How to set spring boot active profiles with maven profiles

    In the previous post you could read about separate Spring Boot builds for a local development machin ...

  10. mongodb的设计特征

    MongoDB 的设计目标是高性能.可扩展.易部署.易使用,存储数据非常方便.其主要功能特性如下.   (1)面向集合存储,容易存储对象类型的数据.在MongoDB 中数据被分组存储在集合中,集合类似 ...