css样式 - 基本语法

css样式语法 - 基本语法格式

css又叫层叠样式表

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明

选择器: 通常是您需要改变样式的HTML元素

例如：

h1 {width:300px;height:100px;color:red; font-size:14px;}

此时，在通用模板中应该加入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标签就遵循类选择器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样式语法 - 行内样式

行内样式形式：

<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.外部引用样式

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;
}

CSS样式（一）- 基本语法相关推荐

1、CSS样式及其基本语法
CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector {declaration1; declaration2; ... declarationN } 样式是 ...
JS控制CSS样式语法对照
CSS与JS紧密配合,为我们的页面增添了很多别致的效果.为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性. 例如常用的关闭某个漂浮的广告显示:document.g ...
CSS样式规则-CSS结构的特点
要想熟练地使用CSS对网页进行修饰,首先要了解CSS样式规则.设置CSS样式的具体语法规则如下. 选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; -} 在上面的样式规则中,选择器用 ...
前端JavaScript DOM BOM 自学复盘 D1（DOM-获取DOM元素、修改HTML标签/表单/css样式属性、定时器-间歇函数）
内容概要 1. Web API 基本认知 1.1. 作用和分类 1.2. 什么是DOM 1.3. DOM作用 1.4 DOM树 1.4.1. DOM树是什么? 1.4.2. DOM 树的作用 1.5 ...
vue css样式穿透
1. 关于常规css样式的穿透语法 >>> <style scoped>>>> .boxFather .boxChild{width: 200px !i ...
Emmet语法（快速生成HTML结构语法、快速生成CSS样式语法）
1. 快速生成HTML结构语法生成标签直接输入标签名按tab键即可比如div然后tab键,就可以生成<div></div> 如果想要生成多个相同标签加上*就可以了 ...
CSS样式的使用（CSS选择器、CSS语法、CSS常见样式）：
1.CSS样式的理解: Cascading Style Sheets(层叠样式表):修饰html标签样式的 2.使用(需要内嵌html中): 1.行内样式:(通过标签的style属性使用) 格式:样式 ...
CSS浏览器兼容性的4个解决方案：浏览器CSS样式初始化、浏览器私有属性，CSS hack语法和自动化插件...
前端是一个苦逼的职业,不仅因为技术更新快,而且要会的东西实在太多了(如果全写出来,那真是一箩筐),更让人头疼的是,还要面临各种适配.兼容性问题. 一直以来都是头痛医头脚痛医脚,没有进行系统的梳理,整个 ...
快速生成CSS样式语法（HTML、CSS）
快速生成CSS样式语法(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta cha ...

CSS样式（一）- 基本语法