CSS（层叠样式表）做网页的外观

四种样式：

权重： 行内样式>内嵌式>链接式

1. 行内样式

<div style="color:red;font-size:30px">hello world</div>

2. 内嵌式，放在<head></head>中

    <!--内嵌式-->

    <style type="text/css">

        div {

            color: green;

            font-size: 50px;

        }

    </style>

3. 链接式，放在<head></head>中

<link href="css/demo.css" rel="stylesheet" />

4. 放在<head></head>中，不推荐，因为要html中所有内容加载完毕才导入css样式

    <style >

        @import url(css/demo.css);

    </style>

CSS选择器：

权重： id>class>标签

1. 标签选择器

div {

    color: green;

    font-size: 30px;

}

2. class选择器

.c1{

    color :blue;

}

3.id选择器

#d1{

    color:fuchsia ;

}

一个标签可以有多个class,但是只能有一个id;class能公用，但是id不行。

    <div class="c1 c2" id="d1">早上好</div>

    <p class="c1" id="d2">晚安</p>

介绍一些CSS属性：

1. div bold {}  空格表示div里面的bold标签的样式

div bold{

    font-size:50px;

    color :#ff6a00;

}

2. h1,h2{} 逗号表示h1和h2标签的样式

h1,h2{

    font-size:70px;

    color :black;

}

3. 与字体相关的CSS属性

字体相关的CSS属性能继承，其他的不行

#d3{

    color:blue;

    font-size:20px;

    font-family :"微软雅黑"; /*默认是宋体*/

    font-weight :;  /*字体加粗*/

    text-decoration:underline;

    text-transform:capitalize; /*英文大小写*/

    letter-spacing:3px; /*字间距*/

    /*和字体不相关的不继承*/

    width :300px;

    height :50px;

    border:solid 3px red;

}

4. 字体居中，列表中的字体也可以设置高度。

#d4{

    width :300px;

    height :50px;

    border:solid 2px red;

    text-align:center;

    line-height:50px;  /*文字垂直居中，高度设置和框的高度相同*/

}

li{

    line-height :30px;

}

5.边框样式

h3{

    width :100px;

    height :100px;

    /*border:solid 2px red;*/

    border-style:dotted;

    border-width:10px;

    border-color :red;

    border-right-color:aqua;

    border-top-color :fuchsia;

    border-bottom-color :orange;

    border-left-color :transparent ;

}

6. 利用border画三角形

h4{

    width :0px;

    height :0px;

    border-style:solid;

    border-width:10px;

    border-right-color:aqua;

    border-top-color :transparent ;

    border-bottom-color :transparent ;

    border-left-color :transparent ;

}

7. 背景CSS属性

body{

     background-image :url(../image/2.jpg);

     background-repeat:no-repeat;

     background-attachment :fixed;/*图片不跟着进度条走*/

     /*可以合起来写*/

     /*background :red url(../image/2.jpg) no-repeat fixed 5px 10px;*/

}

代码显示：

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <!--内嵌式-->

    <!--<style type="text/css">

        div {

            color: green;

            font-size: 50px;

        }

    </style>-->

    <!--链接式-->

    <link href="css/demo.css" rel="stylesheet" />

    <!--导入样式-->

    <!--<style >

        @import url(css/demo.css);

    </style>-->

    <meta charset="utf-8" />

</head>

<body>

    <!--行内样式-->

    <div style="color:red;font-size:30px">hello world</div>

    <br/>

    <!--CSS选择器

    标签选择；class选择器；id选择器

    id选择器的优先级最高，class次之，标签最低；一个标签可以有多个class,但只能有一个id；多个标签能公用同一个class，但id不能公用-->

    <div>你好</div>

    <div class="c1 c2" id="d1">早上好</div>

    <p class="c1" id="d2">晚安</p>

    <!--权重：

    行内样式>内嵌式>链接式

    id>class》标签-->

   <!--div p {}  空格表示div里面的P标签的样式-->

    <div>

        <bold> Hello world</bold>

    </div>

    <!--h1,h2{} 逗号表示h1和h2标签的样式-->

    <h1>新闻1</h1>

    <h2 >新闻2</h2>

    <!--css具有继承性：只有字体相关的一些css属性才能被继承。-->

    <div id="d3">

        非字体的CSS属性不具有继承性 english

        <p>字体具有继承性 chinese</p>

    </div>

   <br/>

   <br />

   <br />

    <!--字体对齐-->

    <div id="d4">

        字体对齐

    </div>

  <!--  对列表定义行高-->

    <ul>

        <li>对列表定义行高</li>

        <li>对列表定义行高</li>

        <li>对列表定义行高</li>

    </ul>

   <!--设置边框-->

    <h3> 设置边框</h3>

    <!--三角形-->

    <h4>三角形</h4>

    <br />

    <br />

    <br />

    <!--背景-->

    <h5></h5>

</body>

</html>
div {

    color: green;

    font-size: 30px;

}

.c1{

    color :blue;

}

.c2{

    color:orange;

}

#d1{

    color:fuchsia ;

}

#d2{

    color:aqua ;

}

/*div bold {}  空格表示div里面的bold标签的样式*/

div bold{

    font-size:50px;

    color :#ff6a00;

}

/*h1,h2{} 逗号表示h1和h2标签的样式*/

h1,h2{

    font-size:70px;

    color :black;

}

/*与字体相关的属性*/

/*字体相关的CSS属性能继承，其他的不行*/

#d3{

    color:blue;

    font-size:20px;

    font-family :"微软雅黑"; /*默认是宋体*/

    font-weight :;  /*字体加粗*/

    text-decoration:underline;

    text-transform:capitalize; /*英文大小写*/

    letter-spacing:3px; /*字间距*/

    /*和字体不相关的不继承*/

    width :300px;

    height :50px;

    border:solid 3px red;

}

#d4{

    width :300px;

    height :50px;

    border:solid 2px red;

    text-align:center;

    line-height:50px;  /*文字垂直居中，高度设置和框的高度相同*/

}

li{

    line-height :30px;

}

/*边框样式*/

h3{

    width :100px;

    height :100px;

    /*border:solid 2px red;*/

    border-style:dotted;

    border-width:10px;

    border-color :red;

    border-right-color:aqua;

    border-top-color :fuchsia;

    border-bottom-color :orange;

    border-left-color :transparent ;

}

/*利用border来画三角形*/

h4{

    width :0px;

    height :0px;

    border-style:solid;

    border-width:10px;

    border-right-color:aqua;

    border-top-color :transparent ;

    border-bottom-color :transparent ;

    border-left-color :transparent ;

}

h5{

    width :100px;

    height :100px;

    border:solid 2px red;

    background-color :#eebdbd;

    background-image :url(../image/2.jpg);

    background-repeat:no-repeat;

    background-position:10px 30px;

}

body{

     background-image :url(../image/2.jpg);

     background-repeat:no-repeat;

     background-attachment :fixed;/*图片不跟着进度条走*/

CSS-学习笔记一的更多相关文章

  1. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  2. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  3. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  4. HTML+CSS学习笔记（5）- 与浏览者交互，表单标签

    HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

  5. HTML+CSS学习笔记(4) - 认识标签（3）

    HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...

  6. HTML+CSS学习笔记（3）- 认识标签（2）

    HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

  7. HTML+CSS学习笔记(2) - 认识标签（1）

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  8. HTML+CSS学习笔记(1) - Html介绍

    HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...

  9. css学习笔记四

    广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...

  10. CSS学习笔记：溢出文本省略（text-overflow）

    原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...

随机推荐

  1. [AlwaysOn Availability Groups]排查：AG配置

    排查AG配置 本文主要用来帮助排查在AG配置时出现的问题,包括,AG功能被禁用,账号配置不正确,数据库镜像endpoint不存在,endpoint不能访问. Section Description A ...

  2. CentOS7minimal MySql的卸载及安装

    因为CentOS7精简版默认是有残留的MySql的,所以开始时一定要先卸载掉原来的MySql 首先要使用root用户登录 卸载: 1.卸载原有程序 yum remove mysql mysql-ser ...

  3. 【转】Java并发编程：深入剖析ThreadLocal

    来自: http://www.importnew.com/17849.html 想必很多朋友对ThreadLocal并不陌生,今天我们就来一起探讨下ThreadLocal的使用方法和实现原理.首先,本 ...

  4. Linux yum如何下载rpm包到本地

    下载前先安装一个小插件 [root@wang yum.repos.d]# yum install -y yum-plugin-downloadonly 安装一个包的同时 加上 yum install ...

  5. 使用ab进行压力测试详解

    ab是apache自带的压力测试工具,非常好用.转载几篇对ab工具的详细使用的博文.猛击下面的链接地址 http://www.365mini.com/page/apache-benchmark.htm ...

  6. [转]一种简单的js时间控件

    使用方法: 粘贴代码到文本文档中,文档名称为datetime.js,然后在html文件中引用如下代码即可 <input name="shijian1" id="sh ...

  7. Hibernate 错题分析

  8. jdbc java数据库连接 1）jdbc入门

      之前操作数据 1)通过mysql的客户端工具,登录数据库服务器  (mysql -u root -p 密码) 2)编写sql语句 3)发送sql语句到数据库服务器执行 什么是jdbc? 使用jav ...

  9. python高级之装饰器

    python高级之装饰器 本节内容 高阶函数 嵌套函数及闭包 装饰器 装饰器带参数 装饰器的嵌套 functools.wraps模块 递归函数被装饰 1.高阶函数 高阶函数的定义: 满足下面两个条件之 ...

  10. http协议进阶（三）补充：报文首部

    之前写的关于报文首部的传送门: 报文首部:http://www.cnblogs.com/imyalost/p/5708445.html 通用首部字段:http://www.cnblogs.com/im ...