web6.CSS

来源：互联网发布：淘宝上的杂牌手机编辑：程序博客网时间：2024/06/05 17:37

CSS的全称是Cascading Style Sheet层叠样式表

h1 {color:red; font-size:14px;}

h1是选择器 color:red 整体是一个声明，color是属性，red是值

@charset "utf-8";

设置utf-8编码，一般用的比较少

/*这是注释*/

CSS的注释方法

引用CSS的方式

1.内联样式<h1 style="color: red; font-size: 20px;"></h1>

2.内部样式

<style type="text/css">    h1{      color: red;      font-size: 20px;        }</style><h1>project</h1>

3.外部样式

<head>    <link rel="stylesheet" type="text/css" href="index.css"></head>

<style>    @import  url("hello.css");    @import "word.css";</style>

link和@import区别

link是html标签，可以放在html的任何地方

@import是css的语法要放在style里面

link引入css时，在页面加载时同时加载，@import在网页完全加载完成后加载

link无兼容问题 @import不支持某些低版本浏览器 IE5以上才能识别

使用js控制dom改变样式时只能用link 而不能用@import

文件路径：

1.相对路径（相对于当前的路径）
同一目录同一文件夹下直接

@import "a.css"

同一目录不同文件夹 css/a.css或者./css/a.css

回到上一级寻找img文件夹里的图片 ../imgs/a.png

2.绝对路径（本地路径的绝对地址）

比如：yanyuzhuodeMacBook-Pro:~ yanyuzhuo$ /Users/yanyuzhuo/Desktop/yyz/书/bootstrap-4.0.0-alpha.6/js

3.网站路径（一般用相对路径）

/static/css/a.css

http://cdn.jirengu.com/kejian/8-1.png通过http服务提供的图片的地址

在js-bin上展示一个图片的操作：

需要将本地图片上传到一个地方，生成一个网址，然后引用

或者开启本地服务器localhost 生成图片地址然后引用

html和css的书写规范：

1.语法不区分大小写，但建议统一使用小写

2.不使用内联的style属性定义样式

3.id和class使用有意义的单词，分隔符建议使用

4.有可能就使用缩写

5.属性值是0的省略单位

6.块内容缩进

7.属性名冒号后面添加一个空格比如

color: red

chrome开发者工具的功能区：

elements: 查看页面元素

console:调试JS

source：断点调试

network: 调试ajax接口时会用到可以看到接口的参数，后台的响应，网络请求等

resource：当前页面的资源图片样式 js等

timeline：分析时序

CSS编码参考

https://github.com/fex-team/styleguide/blob/master/css.md

http://docs.kissyui.com/1.4/docs/html/tutorials/style-guide/css-coding-style.html

0 0