Css: 指层叠样式表 (Cascading Style Sheets),它是用来进行网页风格设计的。通俗的说就是进行网页美化的,没有html依然存在,多了css 它会更好。但是没有html,css就没用多大用处了。
一、定义:
1、样式定义如何显示 HTML 元素
2、是为了解决内容与表现分离的问题
3、多个样式定义可层叠为一
4、外部样式表可以极大提高工作效率(外部样式表通常存储在 CSS 文件中)
二、分类:
1、外部样式表(写在css文件中)
使用情况:当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。
在页面中引用如下:
<head>
<link rel="stylesheet"type="text/css" href="mystyle.css">
</head>
mystle是定义样式表文件的名称。
2、内部样式表(在head头部)
当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过<style> 标签定义内部样式表。
<head>
<style type="text/css">
body{background-color: red}
p{margin-left: 20px}
</style>
</head>
3、内联样式(在html中)
当特殊的样式需要应用到个别元素时,就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<pstyle="color: red; margin-left: 20px">
Thisis a paragraph
</p>
三、语法:
两个主要部分构成:选择器,以及一条或多条声明。
selector{declaration1; declaration2; ... declarationN }
selector:选择器通常是您需要改变样式的 HTML 元素。
Declarationx:每条声明由一个属性和一个值组成。
1、选择器
Html标签选择器
没有标识,直接引用。
ID 选择器
以“#”标识引用
类选择器
以“.”标识引用
2、三个选择器的异同:
同:都可以通过各自的选择器,来为html内容制定样式。
异:
html 标签选择器比较“整块化”:大家都知道html标签是用来调整html 页面布局的,所以,这个分块比较整齐,是页面的框架,不会总是具体到某个控件或者某个文本。而ID 标签和class标签是个人设定的,我们可以在我们操作的任何地方定义,id 或者class ,或者两者。这样可以把页面样式细化。
重复定义:ID 选择器不可以重复定义,一个页面中,ID 号是唯一的,一定有地方占用,其他地方就不可以占用。class选择器则不同,我们可以把多个地方定义成同一个类,这样方便在样式表统一定义格式,而不用同一个样式多出定义。
注意:html 标签也是有ID 和class属性的。也就是说,如果您给html标签定义了ID ,class 属性,在css 中也可以通过使用ID选择器或者class 选择器来达到目的。一般我们直接使用html 标签,不使用ID,CLASS ,不是那个更好,只是给html 标签定义样式,有现成的html 标签,就没有必要在定义id 或者class.反之,不是html标签的,只能根据需要定义ID ,class 来定义样式了。
也就是:html ,ID ,class 是灵活使用的。
3、书写规则:
大小写:
选择器是对标签的大小写敏感的。
冒号::属性和值之间
属性(property)是您希望设置的样式属性(style attribute)。
每个属性有一个值。属性和值被冒号分开。
selector{property: value}
引号:“”。属性值为若干个单词。
p{font-family: "sans serif";}
分号:;多个属性之间。
p{text-align:center; color:red;}