概念

　　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. MySQL 各类数据文件介绍

    数据文件 在MySQL中每一个数据库都会在定义好(或者默认)的数据目录下存在一个以数据库名字命名的文件夹,用来存放该数据库中各种表数据文件. 不同的MySQL存储引擎有各自不同的数据文件,存放位置也有 ...

  2. Bash特殊变量：$0, $#, $*, $@, $?, $$实战

    在linux下配置shell参数说明 前面已经讲到,变量名只能包含数字.字母和下划线,因为某些包含其他字符的变量有特殊含义,这样的变量被称为特殊变量. 例如,$ 表示当前Shell进程的ID,即pid ...

  3. Python Web（Django）与SQL SERVER的连接处理

    (开开心心每一天~ ---虫瘾师) Python Web(Django) 与SQL SERVRE的连接----Come QQ群:607021567(里面有很多开源代码和资料,并且python的游戏也有 ...

  4. python 信息收集器和CMS识别脚本

    前言: 信息收集是渗透测试重要的一部分 这次我总结了前几次写的经验,将其 进化了一下 正文: 信息收集脚本的功能: 1.端口扫描 2.子域名挖掘 3.DNS查询 4.whois查询 5.旁站查询 CM ...

  5. How nginx "location if" works

    Nginx's if directive does have some weirdness in practice. And people may misuse it when they do not ...

  6. Python set() 函数

    描述 set() 函数创建一个无序不重复元素集,可进行关系测试,删除重复数据,还可以计算交集.差集.并集等. 语法 set 语法: class set([iterable]) 参数说明: iterab ...

  7. Python json & pickle, shelve 模块

    json 用于字符串和python的数据类型间的转换 四个功能 dumps dump loads load pickle 用于python特有的类型和python的数据类型进行转换 四个功能 dump ...

  8. Eclipse中启动tomcat: java.lang.OutOfMemoryError: PermGen space的解决方法

    tomcat启动的时候出现这种错误一般是项目引用了太多的jar包,或者反射生成了太多的类,或者有太多的常量池,导致非堆内存中永久保存区域不够,就有可能会报java.lang.OutOfMemoryEr ...

  9. 了解tomcat的server.xml文件

    <?xml version='1.0' encoding='utf-8'?> <!-- Note: http://201605130349.iteye.com/blog/229898 ...

  10. Mac下将文件复制到移动硬盘

    在Mac下将移动硬盘格式化成exfat,这样Mac和Windows都可以对移动硬盘进行识别