CSS学习笔记——基本写法

1.div+css网页标准布局

1.div

　　1.DIV全称是division，意为“区块、分割”，DIV标签是一个无意义的容器标签，用于将页面划分出不同的区域

　　2.通过DIV将复杂的页面进行细分块，可以将问题细分一个一个解决，所以通过DIV将页面分块是一个关键的工作，也是决定最终效果与质量的前提。

2.css

　　CSS (Cascading Style Sheet)，中文翻译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

3.div承载的是内容，而css承载的是样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords"content=""/>
<meta name="description" content="本篇网页的概述，一段话，对网站的进一步描述"/>
<meta name="author"  content="网页作者的资料">
<meta name="robots" content="" />
<meta http-equiv="Content－Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style>
/*
     body{
      color:blue;
     }
     div{
       font-size:15px;background:red;
     }
     */
</style>
</head>

<body>
<div>
  我是div
</div>
</body>
</html>

2.css写法

1.嵌入式css写法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

    <!-- 嵌入式css写法 -->
    <style type="text/css">/*选择器*/
        p{
            color:red;
            font-size: 30px;
        }
        span{
            color:green;
            font-size: 40px;
        }
    </style>

</head>

<body>
    
    <a href="" style='color:blue;font-size:40px'>百度</a>
    <br />

    <span>span标签</span>

    <p>今天是星期天</p>
    <!-- 行内样式 -->
    <div style='color:blue;font-size:40px'>今天天气不错</div>
</body>
</html>

2.引入样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<!-- 引入样式 -->
<link rel="stylesheet" href="style.css" />

    
</head>

<body>
    


    <p>今天是星期天</p>
    <p>今天是星期天</p>
    <p>今天是星期天</p>
    <p>今天是星期天</p>
    <p>今天是星期天</p>

</body>
</html>

CSS部分

/*导入样式*/
@import url('base.css');

p{
            color:orange;
            font-size: 50px;
        }


span{
            color:green;
            font-size: 40px;
        }

3.选择器

当我们定义一条样式规则时候，这条样式规则会作用于网页当中的某些元素，而我们的规定的这些元素的规则就叫做选择器。　　

1.常用的选择器：

　　1、id选择器　　#idname

　　2、类选择器　　.classname

　　3、标签选择器　　tagname

　　4、交叉选择器　　tagname.classname　　tagname#idname

　　5、群组选择器　　多个选择器用“，”隔开

　　6、后代选择器（包含选择器）　　父级和子级用空格隔开

　　7、通用选择器　　* {}

2.CSS选择器优先级示意图　　

所谓的优先级，指的就是哪条样式规则会最后作用于指定的元素，他只遵循一条规则，指定的越具体优先级越高

优先级由高到低：

　　　　　　　　行内样式

　　　　　　　　交叉选择器

　　　　　　　　id选择器

　　　　　　　　类型选择器

　　　　　　　　标签选择器

　　　　　　　　*通配符

　　　　　　　　浏览器对标记预定义的样式

　　　　　　　　继承的样式

后代级别选择器

同辈级别选择器

伪类选择器

属性选择器

UI伪类选择器

<style type="text/css">

* { padding:0; margin:0; }

.box h2 {

　　//内边距左边的距离
　　padding-left:10px;

　　//内边距左边的距离
　　padding-right:10px;

　　//边框有无、宽度和颜色
　　border: 1px solid #000;

　　//背景的高度
　　height:100px;

　　//背景的宽度
　　width: 100px;

　　//背景颜色
　　background:#87b0e1;
　　line-height:30px;

　　//文字的颜色
　　color:#fff;

　　//文字的大小
　　font-size:14px;

　　//文字左右对其，可以使得div横向排列
　　float:left;

　　//去掉a标签的下划线
   text-decoration: none;

　　//在ul里面写去掉li前面的小圆点
   list-style-type: none;

　　//relative定位的时候使用width会影响上一级元素的width，把上一级元素的宽度撑大，absolute不会
   //在a{}中使用width是文本的宽度，在ul中使用时ul的宽度，即是所有li的宽度的和
   //在a{}中使用width要使用display：block

　　position：relative和absolute

　　//h1标签的默认大小为200%
　　//h2标签的默认大小为150%
　　//h3标签的默认大小为115%
　　//使用text-align对容器内的容器进行居中的时候，需要在内部容器中的文字的属性上加上display：none，否则不能居中，比如<p><a href="#">菜 单</a></p>,需要在.box p a的属性中加上display：none和text-align：center
　　//在给内部的a标签加上了width和height之后，居中的效果将失效，要再加上margin：0 auto才能使得居中的效果再次显示出来
　　//图像的左侧和右侧均不允许出现浮动元素：
　　//使用clear：both
　　//设置元素的位置坐标的时候要修改position:absolute，否则修改坐标位置不发生改变
　　//使用jquery的show()方法的时候，要先在css中加上display:none；才能使用.show("fast");
　　//给label设置了宽度后，想要使得label的内容在这一宽度范围中向右对其，要写float：left;text-align:right;
　　//使用top=0;left=o;right=0;bottom=0;margin=auto;positon:absolute;来使得元素在页面中处于中心
}
</style>

4.响应式布局

　　响应式布局是现在很流行的一个设计理念，随着移动互联网的盛行，为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果，设计师提出了响应式布局的设计方案。所谓的响应式布局，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。也就说一个页面可以在多个终端呈现出你想要的效果，能够兼容各个终端。

1.响应式布局的优缺点

优点：
　　面对不同分辨率设备灵活性强
　　能够快捷解决多设备显示适应问题
　　根据不同的显示器调整设计最适合用户浏览习惯的页面
缺点：
　　兼容各种设备工作量大，效率低下
　　代码累赘，会出现隐藏无用的元素，加载时间加长
　　其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果
　　因为要适应不同的设备，页面的结构可能会有所不同，会导致页面的辨识度不强

2.利用CSS3-Media Query实现响应式布局

1、media query：

　　通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件

2、语法结构及用法

　　@media 设备名 only （选取条件） not (选取条件) and （设备选取条件），设备二 {sRules}

　　(1)在link中使用@media：

<link rel="stylesheet" href="1.css" media="screen and (min-width:1000px)"

　　（2）在样式表中内嵌@media：

<style>
  @media  screen and (min-width: 600px) {
     .one{
        border:1px solid red;
        height:100px;
        width:100px;
     }
    
  }
</style>

特殊设备语法

1.Phone4
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)"
type="text/css" href="iphone4.css" />
2.iPad
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"
type="text/css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"
type="text/css" />
3.android
/*240px的宽度*/
<link rel="stylesheet" media="only screen and (max-device-width:240px)"
href="android240.css" type="text/css" />
/*360px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-
width:360px)" href="android360.css" type="text/css" />
/*480px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-
width:480px)" href="android480.css" type="text/css" />

posted @ 2015-07-21 14:32 tonglin0325 阅读(176) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

tonglin0325.github.io