<style type="text/css">
h1{
font-family:黑体
}
</style>
直接些标签名进行定义属性,这个也比较常见。但是它的定义通常放在<style>标签中声明。
2、类class链接样式
定义也通常在<style>标签中声明
<style type="text/css">
.style1{
color:red
font-size:16px
}
</style>
引用时候直接在标签的属性中使用class="style1" 记住是class属性
<h1></h1>
3、id链接样式
<style type="text/css">
#style1{
color:blue
font-size:16px
}
</style>
引用的时候就用标签属性中的id属性 ,要区别于类属性
<h1 id="style1"></h1>
区别:类class链接样式和id链接样式
类连接样式可以适用于多个对象设置同样的属性中,
而id链接样式只能用于一个对象标签中,其他标签则会失效
4、html选择器:
直接用标签进行声明,跟上面的第一个一样
2)派生选择器:
<style type="text/css">
h1 h2{
color:red
font-size:1em
font-family:黑体
}
</style>
h1 h2的写法意思是代表着该css样式只能之<h1><h2> </h2></h1>同时出现,且是嵌套使用的时候才能生效
3)id选择器
id选择器的作用是通过id选择器将css样式作用到页面的对象上。写法:
<style type="text/css">
#text p{
font-size:1em
}
</style>
将该样式绑定到html上,就要这样写
<h1 id=#"text">这个是不要p的写法
要p的写法
表明该对象只能作用在text对象上的所有p标签中
4)class选择器
<style type="text/css">
.fancy{
color:red
background:#666
}
</style>
使用的时候也是
<h1></h1>
也可以像上面的一样用派生选择器
<style type="text/css">
.fancy td{
color:red
background:#666
}
</style>
说明生效只能在td中
5)分组选择器
h1{color:bule}
#text{color:bule}
.play{color:bule}
这种写法太繁琐了
我们可以使用
h1,#text,.paly{
color:bule}
这样来定义
6)伪类和伪类选择器
用关键字:lang来定义
<html>
<head>
<style type="text/css">
q:lang(smile){
quotes:"∞"
}
</style>
</head>
<body>
好吧,展示一下
<p>请看<q>祝你愉快</q></p>
</body>
</html>
一、Css书写顺序:
1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
二、Css语法:
命名一般为小写英文字母。
为了代码的易读性,在每个声明块的左花括号前添加一个空格。
每条声明语句的 : 后应该插入一个空格。
所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的,但是,如果省略这个分号,你的代码可能更易出错。
对于属性值或颜色参数,省略小于 1 的小数前面的 0 (例如,.5 代替 0.5;-.5px 代替 -0.5px)。
十六进制值应该全部小写,例如,#fff。
尽量使用简写形式的十六进制值,例如,用 #fff 代替 #ffffff。
避免为 0 值指定单位,例如,用 margin: 0 代替 margin: 0px。
Css常用的一些命名:
可参考:CSS 常用命名 - 彼岸时光 - 博客园。
三、Css的引入:
Css的引入一般有两种,link和@import,一般建议使用link引入。这样可以避免考虑@import的语法规则和注意事项,避免产生资源文件下载顺序混乱和http请求过多的烦恼。
四、Css的命名规范(BEM,OOCSS):
什么是BEM:BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。
命名约定如下:
.block{} // 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。
.block__element{} // 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。
.block--modifier{} // 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后,会有不同的外观。
优点:
BEM 的优点在于所产生的 CSS 类名都只使用一个类别选择器,可以避免传统做法中由于多个类别选择器嵌套带来的复杂的属性级联问题。在 BEM 命名规则中,所有的 CSS 样式规则都只用一个类别选择器。因此所有样式规则的特异性(specificity)都是相同的,也就不存在复杂的优先级问题。这可以简化属性值的层叠规则。代码清单中的命名规则的好处在于每个 CSS 类名都很简单明了,而且类名的层次关系可以与 DOM 节点的树型结构相对应。
缺点:
这样类名过于长,且复杂。
什么是OOCSS(面向对象CSS):
OOCSS 表示的是面向对象 CSS(Object Oriented CSS),是一种把面向对象方法学应用到 CSS 代码组织和管理中的实践。 OOCSS最关键的一点就是:提高他的灵活性和可重用性。这个也是OOCSS最重要的一点。OOCSS主张是通过在基础组件中添加更多的类,从而扩展基础组件的CSS规则,从而使CSS有更好的扩展性。
OOCSS的优点:
减少CSS代码。
具有清洁的HTML标记,有语义的类名,逻辑性强的层次关系。
语义标记,有助于SEO。
更好的页面优化,更快的加载时间(因为有很多组件重用)。
可扩展的标记和CSS样式,有更多的组件可以放到库中,而不影响其他的组件。
能轻松构造新的页面布局,或制作新的页面风格。
OOCSS的缺点:
OOCSS适合真正的大型网站开发,因为大型网站用到的可重用性组件特别的多,如果运用在小型项目中可能见不到什么成效。所以用不用OOCSS应该根据你的项目来决定。如果没用巧妙的使用,创建组件可能对于你来说是一堆没用的东西,成为一烂摊子,给你的维护带来意想不到的杯具,说不定还是个维护的噩梦。
欢迎到优就业来了解
CSS用的是类C#语言的标准。书写方法自由灵活,没有一定的局限。但是常期以来为了阅读和维护等方面的经验,一般都是这样的格式:
标名 {
属性:属性值
属性:属性值;
}
当然这样大家都能理解,你自己也好维护,没有什么特殊的要求的!
为了便于阅读有人建议,CSS分为以下方面的控制:
先写位置等:
如:position:absolute
top,left,width,height等,
空一行,再写布局方面的,如:margin,padding等;
空一行,写字体格式:如line-height等
再空一行,写字体相关!如:font-size,font-color等;
最后是其他的属性!
但一般情况下,我们还是没有必要写那么多的属性值对的!所以就很少有人去空行做这些东西了!
但是一般内容较少时,可以直接写在一行,并不影响阅读的!
纠正一点的是:CSS文件进行调用时并不像一楼所说!不换行可以减少代码的大小!这是毫无根据的臆断!因其会自动解释换行和空白的!代码的大小是因为我们写了一些没有必要的东西所形成的时空代价,比如在body中已经有font-size:9pt而在BODY中的一个DIV中,如果要设置字体为9pt时没有必要再定义font-size:9pt了,如果再定义就是出现代码时的增大。还有一些默认也没有必要写出。
如果真如一楼所说,我想问一下一楼:你知道吗,在CSS中是可以加注释的,请问注释会不会增加代码量?答案是不会!因为其不运行!
sorry,对不起楼上,我说的是运行方面的,没有说下载方面的事。恕我直言,如果有一个人一个不足0。2K的CSS而写了N个GB的注释的话,那他一定有病了!注释不是发文章,一个CSS文件最多能有多少注释?不过我经常遇到写好的CSS进行压缩加密的情况,为了防止别人偷看,至于说能有多少,一个回车只是一个字符,占8bits,一个byte,请问一下,连写与其能有多大分别?再者请问一下为什么还要分开写呢?这是代码的维护时很难读懂的情况下还要讲时间代价吗?
程序的时空代价是指:运行时间与编写时间的相比,存储空间与运行空间的对比。
对于离散型网页来说,下载页面的同时还在下载CSS文件,而且CSS会放在机器的临时文件夹中,这样,整个网站也用不了下载几个CSS,且下次打开网页不须再下CSS。这样你认为呢?