1、选择器用于指定CSS样式作用的HTML对象,花括号内是对该对象设置的具体样式。
2、属性和属性值以“键值对“ 的形式出现。
3、属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。
4、属性和属性值之间用英文“:“连接。
5、多个“键值对”之间用英文“”进行区分。可以用段落和表格的对齐的演示。
CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
扩展资料:
CSS作为一种定义样式结构如字体、颜色、位置等的语言,被用于描述网页上的信息格式化和显示的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。
无论哪一种方式,样式单包含将样式应用到指定类型的元素的规则。外部使用时,样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。
样式规则是可应用于网页中元素,如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中,外部样式单保存在独立的文档中,网页通过一个特殊标签链接外部样式单。
一、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应该根据你的项目来决定。如果没用巧妙的使用,创建组件可能对于你来说是一堆没用的东西,成为一烂摊子,给你的维护带来意想不到的杯具,说不定还是个维护的噩梦。
欢迎到优就业来了解
Normalize.css
是一种CSS reset的替代方案。它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。
知乎总结的html tags
html一共有114个标签,但html5有添加了一些标签,如nav、header、article、section、aside、footer等。
闭合标签的基本格式如下:
<标签名>文本内容</标签名>
可以给这个标签添加一些属性,比如:
<标签名 属性_1="属性值" 属性_2="属性值">文本内容</标签名>
标题、段落等文本元素都要求闭合标签,也就是要有一个开标签和一个闭标签,比如:
<标签名 属性_1="属性值" 属性_n="属性值" />
非文本内容是通过自闭合标签显示的。闭合标签与自闭合标签的区别在于,闭合标签包含的是会显示的实际内容,而自闭合标签只是给浏览器提供一个对要显示内容的引用。
<标签名 属性_1="属性值" 属性_n="属性值" />
** 块级元素盒子会扩展到与父元素同宽**
块级标签
行内元素盒子会“收缩包裹”其内容,并且会尽可能包紧。
行内标签:
CSS规则分两部分,即选择符和声明。声明又由两部分组成,即属性和值。声明包含在一对花括号内。
图中文字:selector:选择符;declaration:声明;property:属性;value:值;opening curly bracket:左花括号;closing curly bracket:右花括号。
对这个基本的结构,有三种方法可以进行扩展。
第一种方法:多个声明包含在一条规则里。
p {color:redfont-size:12pxfont-weight:bold}
这样,一条规则就可以把段落文本设置成红色,12像素大,粗体。
第二种方法:多个选择符组合在一起。如果想让h1、h2和h3的文本都变成蓝色,粗体,可以这样分别写:
但其实,把三个选择符组合在一起也可以,这样就能减少重复输入:
千万注意每个选择符之间要用逗号分隔(最后一个后面不用加)。
第三种方法:多条规则应用给一个选择符。 假设,你在写完前面那条规则后,又想只把h3变成斜体,那可以再为h3写一条规则:
用于选择特定元素的选择符又分三种。
上下文选择符的格式如下:
标签1 标签2 {声明}
上下文选择符,严格来讲(也就是CSS规范里),叫后代组合式选择符(descendant combinator selector),就是一组以空格分隔的标签名。用于选择作为指定祖先元素后代的标签。
article p {font-weight:bold}
这个例子中的上下文选择符表明,只有是article后代的p元素才会应用后面的样式。换句话说,上面这条规则的目标是位于article上下文中的p元素。
css class style 显示效果
多类选择符
<p class="specialtext featured">Here the span tag <span>may or may not</span>be styled.</p>
.specialtext .featured {font-size:120%}
多个类名,如这里的specialtext和featured,放在同一对引号里,用空格分隔。实际上,更准确的说法,就应该是HTML的class属性可以有多个空格分隔的值。要选择同时存在这两个类名的元素,可以这样写:
ID与类的写法相似,而且表示ID选择符的#(井号)的用法,也跟表示类选择符的.(句号)类似。
如果有一个段落像下面这样设定了ID属性
那么,相应的ID选择符就是这样的:
#specialtext {CSS样式声明}
ID的用途是在页面标记中唯一地标识一个特定的元素。它能够为我们编写CSS规则提供必要的上下文,排除无关的标记,而只选择该上下文中的标签。
相对来说,类是可以应用给任意多个页面中的任意多个HTML元素的公共标识符,以便我们为这些元素应用相同的CSS样式。而且,使用类也让为不同标签名的元素应用相同的样式成为可能。
规则一:包含ID的选择符胜过包含类的选择符,包含类的选择符胜过包含标签名的选择符。
规则二:如果几个不同来源都为同一个标签的同一个属性定义了样式,行内样式胜过嵌入样式,嵌入样式胜过链接样式。在链接的样式表中,具有相同特指度的样式,后声明的胜过先声明的。
规则三:设定的样式胜过继承的样式,此时不用考虑特指度(即显式设定优先)。
1、块级标签转换为行内标签:display:inline
2、行内标签转换为块级标签:display:block
3、转换为行内块标签:display:inline-block
通过对上面css的分析,我们可以初步理解class样式的设置以及对display属性的理解。