css样式 - 基本语法
css样式语法 - 基本语法格式
css又叫层叠样式表
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明
选择器: 通常是您需要改变样式的HTML元素
例如：
h1 {width:300px;height:100px;color:red; font-size:14px;}
此时，在通用模板中应该加入css部分
在原有的模板的<!--js/css-->下面加入
<style type="text/css">
*{margin:0;padding:0;}
</style>
之后的标准模板就变成了
<!doctype html> <html> <head> <!--声明当前页面的编码集：中文编码（GBK/GB2312）,国际编码（utf-8）--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--声明当前页面的三要素--> <title>HTML国际化标准模板 - TCH</title> <meta name="Keywords" content="关键词,关键词,关键词"> <meta name="description" content=""> <!--css/js--> <style type="text/css"> *{margin:0;padding:0;} </style> </head> <body> </body> </html>
css语法的具体形式用法如下：
<head> <!--css:层叠样式表，一件美丽的外衣一样--> <style type="text/css"> *{margin:0;padding:0} <!--为了兼容各种浏览器的贴合边界解决方案（实际项目中使用组合样式，效率比*高）--> .tch{width:300px;height:100px;backgroud:#ffcc00} <!--此处的选择器要与div里的class对应选择器用本身也可以div class也可以--> </style> </head> <body> <!--div:盒子，层，容器--> <!--一般不用id整个页面的只能用一次，style的优先级比较高也不常用--> <div class="" id="" style=""></div> <div class="tch"></div> </body>
在百度的标准里，0.3s可以打开的网页才可以上线，所以，能省的代码一定要优化
6进制颜色值可以使用简写缩写格式 比如#339900写为#390，这样节约字节，或者使用英文单词red等
大多数样式表包含不止一条规则，而大多数规则包含不止一个声明，如： body{font-size:12px;font-family:"微软雅黑";color:#666;}，基于大数据分析，这种可以作为字体默认格式，是令用户看着最舒服的格式。
样式在实际开发中要横排写，会节省字节比如换行符等
html里html标签和css样式不区分大小写比如 width可以写成WIDTH,但是一般不用大写，以小写作为标准
修改的会加注释比如 /* jdf-1.0.0/ adsad.css Date:2012-01-01 11:23 */
css样式语法 - 选择器分组
对选择器进行分组，用逗号将需要分组的选择器分开
h1,h2,h3,h4,h5,h6 {
color : green;
}
多个选择器共用一个属性
css样式语法 - css注释
css样式里的注释和html body里的注释格式不同，形式：/*注释内容*/，在企业级规范里，一般都会用注释写明代码段的作用、标识，例如：
/*t_header S*/
.t_header{font-size:15px;}
/*t_header E*/
S表示开始（start），E表示结束（end）
css样式语法 - 类选择器（class）
在css中类选择器以一个点号显示
.center{text-align:center;}
<p class="center">测试标签</p>
这样此p标签就遵循类选择器center的原则，文字都居中对齐
css样式语法 - id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式
id 选择器以 "#" 来定义
例： 两个 id 选择器
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
注意： id 属性只能在每个 HTML 文档中出现一次。
id 选择器和派生选择器
在现代布局中，id 选择器常常用于建立派生选择器
css样式语法 - 从外部引入样式
从外部引入样式分为两种办法（注：一定要写在<header>标签里）：
Link样式表式： <link rel=”stylesheet” type=”text/css” href=”my.css”(href表示路径)>
Html式： <style type="text/css">@import url("css.css");></style>
css样式语法 - 行内样式
行内样式形式：
<!--以style="css样式"-->
<div style="color:red;font-size:12px;"></div>
<div style="color:red;font-size:12px;"></div>
<h1 class="tch" style="font-size:40px;font-family:"微软雅黑";>adsad</h1>
这里的class不管用，因为style的优先级高，会把class的属性覆盖掉，id的优先级要比style高
样式语法的应用
1.当在网页里看到文字的时候，首先要想到文字的默认值
body{font-size:12px;font-family:"微软雅黑";color:#666;}
基于大数据分析出来的用户看着最舒适的字体格式设置
2.外部引用样式
<link style="text/css" rel="stylesheet" href="css.css"><link>
也可以
<style type="text/css">@import url("css.css");></style>
3.css样式 - background
任何元素都可以
body{
/*背景颜色*/
backgroud-color:#ffcc00;
/*背景颜色，简写形式，一般企业级开发都是用该种方法*/
backgroud:red ;
/*里面双引号单引号没引号都可以，但是在刷个引号内部就要用单引号了，一般都用相对路径*/
backgroud-image:url("images/1.gif");
/*背景图片简写形式，一般企业级开发都会使用此方式*/
backgroud:url(images/mv.jpg);
/*默认值是repeapt,设置不重复在平铺的时候就不会因为铺不满而重复填充*/
backgroud-repeat: no-repeat;
/*横向平铺*/
backgroud-repeat: repeat-x;
/*纵向平铺*/
backgroud-repeat: repeat-y;
/*背景图片的位置*/
backgroud-postion: top left;
backgroud-postion: top center;
backgroud-postion: top right;
backgroud-postion: center left;
backgroud-postion: center center;
backgroud-postion: center right;
backgroud-postion: bottom left;
backgroud-postion: bottom center;
backgroud-postion: bottom right;
/*背景图片的百分比形式 : 水平百分比，垂直百分比*/
backgroud-postion:80%,40%;
/*背景图片位置的数值形式,水平，垂直，单位像素*/
backgroud-postion: 20px 100px;
/*backgroud-size 真实项目中不会放到body里，body的高度和宽度是根据浏览器所定的*/
body{backgroud:url("images/bg.jpg"); no-repeat; backgroud-size:cover}
/*背景图像企业级应用方式，有时会拆开写，比如公共元素*/
backgroud:url("images/mv.jpg") no-repeat 200px 100px;
}
