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. ORA-02292: integrity constraint (xxxx) violated - child record found

    在更新表的主键字段或DELETE数据时,如果遇到ORA-02292: integrity constraint (xxxx) violated - child record found 这个是因为主外 ...

  2. Linq专题之提高编码效率—— 第一篇 Aggregate方法

    我们知道linq是一个很古老的东西,大家也知道,自从用了linq,我们的foreach少了很多,但有一个现实就是我们在实际应用中使用到的却是屈指可数 的几个方法,这个系列我会带领大家看遍linq,好的 ...

  3. 35个java代码性能优化。。转

    前言 代码优化,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑 的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗?没用 ...

  4. jquery打造自定义控件(原创)

    本人第一次发表文章,不足之出请大家多多包涵 下面是一个combox的代码 /// <reference path="../Js/jquery-1.7.2.min.js" /& ...

  5. MySQL(三)

    MYSQL(三) 上一章给大家说的是数据库的视图,存储过程等等操作,这章主要讲索引,以及索引注意事项,如果想看前面的文章,url如下: MYSQL入门全套(第一部) MYSQL入门全套(第二部) 索引 ...

  6. java实现串口通讯

    一. 准备工作 1. 点击此下载java串口通讯相关工具 2. 将RXTXcomm.jar放到  %JAVA_HOME%\jre\lib\ext\  目录下,工程中引入该jar包 3. 将rxtxSe ...

  7. docker核心原理

    容器概念. docker是一种容器,应用沙箱机制实现虚拟化.能在一台宿主机里面独立多个虚拟环境,互不影响.在这个容器里面可以运行着我饿们的业务,输入输出.可以和宿主机交互. 使用方法. 拉取镜像 do ...

  8. 在Azure上实现Linux Server故障转移

    要充分利用公有云的弹性扩展和高可用, 首先要在应用系统层面支持横向扩展(scale out),这个说起来很容易,或者说对新开发的应用系统而言已经成为标配.但是对已有的.老旧的应用系统来说,这就比较困难 ...

  9. Android(Linux)控制GPIO方法二

    前文<Android(Linux)控制GPIO的方法及实时性分析>主要使用Linux shell命令控制GPIO,该方法可在调试过程中快速确定GPIO硬件是否有问题,即对应的GPIO是否受 ...

  10. COGS130. [USACO Mar08] 游荡的奶牛[DP]

    130. [USACO Mar08] 游荡的奶牛 ★☆   输入文件:ctravel.in   输出文件:ctravel.out   简单对比时间限制:1 s   内存限制:128 MB 奶牛们在被划 ...