1.什么是css:CSS(CascadingStyleSheets)CSS语言
1.什么是css:
CSS (Cascading Style Sheets) 层叠样式表,是一个用于修饰文档(可以是标记语言HTML,也可以是XML或者SVN)的语言,可以将文档以更优雅的形式呈现给用户。
HTML和CSS之间的关系?
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。 CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 HTML就像是一个人,而CSS就像是衣服和化妆品,用来装饰HTML。
2.语法 2.1.CSS声明(CSS declarations)
CSS语言的核心功能就是为特定的属性设定特定的值,CSS引擎通过计算出声明的每个属性来显示元素。CSS的属性和值都是大小写敏感的。属性与值通过“:”分隔开。并不是所有的值都适用于同一个属性,不同的属性有一系列不同的值。
2.2.CSS声明块( CSS declaration blocks)
将多个CSS声明写在一起,每个CSS声明通过“;”分隔开,最后一个css声明无需使用“;”分隔开。使用“{ }”将多个CSS声明括起来,这样就构成了一个CSS声明块。
2.3.CSS规则集
选择器(Selector)HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素(在这个例子中就是 p 元素)。要给不同元素添加样式只需要更改选择器就行了。
声明(Declaration)一个单独的规则,如 color: red; 用来指定添加样式元素的属性。
属性(Properties)改变 HTML 元素样式的途径。(本例中 color 就是
元素的属性。)CSS 中,由编写人员决定修改哪个属性以改变规则。
属性的值(Property value)在属性的右边,冒号后面即属性的值,它从指定属性的众多外观中选择一个值(我们除了 red 之外还有很多属性值可以用于 color )。
注意其他重要的语法:每个规则集(除了选择器的部分)都应该包含在成对的大括号里({})。在每个声明里要用冒号(:)将属性与属性值分隔开。 在每个规则集里要用分号(;)将各个声明分隔开。
2.4.CSS可读性
空白( White space)
空白意味着实际空格、制表符和新行,可以添加空白使样式表更加可读。
注释( Comments)
/ 这里就是CSS的注释 /
速记写法( Shorthand)
类似于font,background, padding,bordercss语法规则css语法规则, margin 这些都被称为速记属性。
这些属性允许在一行中写多个属性值。速记属性可以节省时间,使代码整洁。
例如:
border:1px solid red; 定义和用法
border 简写属性在一个声明设置所有的边框属性。
可以按顺序设置如下属性:
如果不设置其中的某个值,也不会出问题,比如 border:solid #ff0000; 也是允许的。
默认值:
not specified
继承性:
no
版本:
CSS1
JavaScript 语法:
object.style.border="3px solid blue"
可能的值 值描述
border-width
规定边框的宽度。参阅:border-width中可能的值。
border-style
规定边框的样式。参阅:border-style中可能的值。
border-color
规定边框的颜色。参阅:border-color中可能的值。
inherit
规定应该从父元素继承 border 属性的设置。
定义和用法
border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
只有当这个值不是 none 时边框才可能出现。
例子 1
<pre>border-style:dotted solid double dashed; </pre>
例子 2
<pre>border-style:dotted solid double;</pre>
例子 3
<pre>border-style:dotted solid;</pre>
例子 4
<pre>border-style:dotted;</pre>
background-color:red;
更加具体的可以去 W3school 网站仔细查看一下
padding: 10px 15px 15px 5px;等价于padding-top: 10px; padding-right: 15px; padding-bottom: 15px; padding-left: 5px;
发表评论
热门文章
Spimes主题专为博客、自媒体、资讯类的网站设计....
一款个人简历主题,可以简单搭建一下,具体也比较简单....
仿制主题,Typecho博客主题,昼夜双版设计,可....
用于作品展示、资源下载,行业垂直性网站、个人博客,....
54447454
10月31日
[已回复]
能重复在发一下吗,无法下载了