CSS_简介/语法结构/长度单位/应用方式/标签的样式重置/表单样式重置

时间:2022-04-09 15:11:50

一、CSS简介: 

w3c(World Wide Web Consortium):万维网联盟,是规定网页标准的一个组织(叫做Web标准)

Web标准:是由w3c和其他标准化组织制定的一系列标准的集合,包含有HTML XTHML Javascript DOM CSS等

  作用:

    在于创建一个统一用于Web表现层的技术标准,以便通过不同的浏览器或终端设备向用户展示信息内容

   好处:

    1.提高网页浏览速度节约文件尺寸,比传统的web设计方法至少节约50%以上的文件尺寸

    2.缩短改版时间将表现(样式/外观)与内容(信息/数据)相分离,只要修改几个CSS文件就可以改变成千上万的网页样式

    3.降低网站的流量费用,带宽要求降低(代码更简洁)
      4.更容易被搜索引擎搜索到,提高网站在百度或谷歌中的排名
           5.内容被更多的设备所访问

组成: 内容,结构(Structure),表现(presentation),行为(behavior)
      1.内容就是制作这房租页面内真正想要让访问者浏览到的信息
      2. 结构标准对应的是XHTML,使内容更加具有逻辑性和易用性,也就是把内容结构化
      3. 表现标准对应的是CSS,用于修饰内容的外观的样式,即表现
      4.行为标准对应的是Javascript,对内容的交互及操作效果,比如通过javascript判断表单提交等

CSS简介:(Cascading Style Sheets 层叠样式表)是一种设计网页样式的工具,可以作为html,xhtml,xml样式的控制语言

CSS 样式排版的优点:

      排版属性功能完整,排版文件可以独立存在,可以共用排版文件

传统HTML设计网页版面的缺点 :

      设置麻烦,修改麻烦,功能严重不足.

测试网页是否有用CSS,在浏览器中改变文字大小就可以知道,有变化说明没用CSS

二、CSS语法结构:

选择符(选择器){属性:属性值} 列如:

body{font-size:20px;}

选择符(selector):指明这组样式针对的对象,可以是xhtml标签也可以是定义了特定的id或class的标签
属性:选择符的样式属性,如颜色,大小定位等
值:是指属性的值
可以同时为一个选择符定义多个属性每个属性之间用分号分隔(所有属性值后面都要带上分号)

<style type="text/css">
body{font-size:20px; background:#0F3; color:#F06;}
h1{font-size:24px;}
span{font-size:2em;}
</style>
</head>
<body>
<h1>*主持召开<span>国务院</span>常务会议</h1>
<h2> 听取最低生活保障政策落实督查情况汇报</h2>
部署进一步加强和改进低保工作<br />
决定将《社会救助暂行办法(草案)》向社会公开征求意见
</body>

body表示我们要控制的范围-针对的对象
font-size:表示的是样式的属性
14px:表示的是属性的值

三、CSS的长度单位:

1.相对长度单位:
    em 相对于当前对象内文本的字体尺寸
    px 像素(推荐使用)
2.绝对长度单位:
    in 英寸
    cm 厘米
    mm 毫米
    pt 点

四、CSS的应用方式

1、内联式样式表:直接写在现有的标记中

<p style="font-size:24px;">0.5秒三分绝杀!波特兰上演波什时刻 第N次拯救热火</p>
<h1 style="font-weight:normal; color:#900;">玩命暴扣扳平+助攻绝杀三分 热火太幸运有这颗队魂</h1>

2、嵌入式样式表:

使用<style></style>标签嵌入到HTML文件的头部中<head>标记中

<style type="text/css">
p{font-size:24px; color:#F03;}
</style>
</head>
<body>
<p>詹波为小弟恶犯叫屈 当事人他都起飞了!肯定假摔</p>
<p>斯帅称客战开拓者奥登不打 波什:他很快就可复出</p>
</body>

3、外链式:

使用<link>标签调用CSS文件(开发中用这种方式)

<link href="CSS在网页中应用的方式.css"  rel="stylesheet" type="text/css" />
</head>
<body>
<h1>*主持召开<span>国务院</span>常务会议</h1>
<div>决定将《社会救助暂行办法(草案)》向社会公开征求意faksdjfkasfkasdfj</div>
</body>

4、导入式:

也可以使用导入方式import,但这种方式和内嵌式一样会占用网页文件的大小,并且有的浏览器解析会有问题,就是先显示网页内容在给网页内容加样式

<style type="text/css">
@import url("CSS在网页中应用的方式.css");
</style>
</head> <body>
<h1>*主持召开<span>国务院</span>常务会议</h1>
</body>

五、标签的默认样式重置(css reset)

  /*body,p,标题标签标签有上下外边距,  ol和ul有上下外边距和左右内边距         每个标签里面的内容字体大小都不太一样这里可以重置一下所有标签中的字体*/
body,p,h1,h2,h3,h4,h5,h6,ol,ul,dd,dl{ padding:0; margin:0; font-size:16px; font-family:Arial, Helvetica, sans-serif,"宋体"}
ol,ul{ list-style:none;}/*ol,ul默认有上下内外边距*/
a{ text-decoration:none;}
img{ border:none;} /*用*号,表示所有标签都重置,这样会影响性能*/