CSS知识点

2017-11-26 本文已影响16人 hmj1993

CSS是Cascading Style Sheet(层叠样式表)的缩写。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
将网站分成两个部分，表现和内容，表现由css控制，内容由PHP从数据库中读取。
样式以<style>开头，</style>结尾
样式一般写在<head></head>之间

CSS基本语法

基本构成
1.选择器
2.属性
3.属性的取值（value）
基本格式
选择器{属性：值;}

小结：一个选择器中可以有多个属性，每个属性都有对应的值，属性和值之间用冒号隔开，属性和属性之间由分号隔开。

按选择器不同来分类

类选择器 Class selector
语法规则：
1.必须以.开头
2.通过class属性来调用
3.类样式可以被多次调用

<head>
<style type='text/css'>
.aa{
    color:red;
    font-size:14px;
}
</style>
</head>

<body>
<p class='aa'>楚河汉界</p>
</body>

ID选择器
语法规则：
1.必须以#开头
2.通过元素的id属性调用
3.只能被调用一次

<head>
<style type='text/css'>
#aa{
    color:red;
    font-size:14px;
    text-decoration:underline;
}
</style>
</head>

<body>
<p id='aa'>楚河汉界</p>
</body>

标签/标记选择器

语法规则：直接选择html的标记

<head>
<style type='text/css'>
p{
    color:red;
    font-size:14px;
    text-decoration:underline;
    font-family: "黑体",'隶书','宋体';
}
</style>
</head>

<body>
<p>楚河汉界</p>
<p>床前明月光</p>
<p>疑是地上霜</p>
</body>

关联选择器
总结：

p .aa 表示p下面的.aa，即p的后代
p>.aa 表示p的子集中的.aa
p.aa表示同时具备p和.aa的元素

<head>
<style type='text/css'>
/*p的后代b，即p下的所有b*/
p b{                    
    color:red;
}
/*p的子集b*/
p>b{                    
    color:red;
}
</style>
</head>

<body>
<p><b>楚河汉界</b></p>
<b>床前明月光</b>
<b>疑是地上霜</b>
</body>

组合选择器
每个选择器之间用，隔开

<style type='text/css'>
.aa,#bb,p{                    
    color:red;
}
</style>

伪类选择器
类有一个状态，可以被多个元素访问，超链接有四个状态，如下
:link 正常链接时候的状态
:visited 已经点击过的状态
:hover 当鼠标移上去时候的状态
:active 当鼠标点击下去的状态

<style type='text/css'>
a:link{
    color: red;
    text-decoration: none;
}
a:visited{
    color: yellow;
    text-decoration: none;
}
a:hover{
    color: orange;
    text-decoration:underline;
}
a:active{
    color: green;
    font-size: 24px;
    text-decoration: underline;
}
</style>

<body>
<a href='#'>超链接</a>
</body>

伪类有四个状态，可以省略其中的某个状态，如果省略就使用默认状态，但是如果不省略就要按照l，v，h，a的顺序。

如果在一个页面上，想要实现一部分的超链接是一个样式，另一部分的超链接是另一种样式，则可以使用伪类和类的组合。

<style type='text/css'>
a.aa:link{
    color: red;
    text-decoration: none;
}
a.bb:link{
    color: yellow;
    text-decoration: none;
}
a.aa:hover{
    color: orange;
    text-decoration:underline;
}
a.bb:hover{
    color: green;
    font-size: 24px;
    text-decoration: underline;
}
</style>

<body>
<a class='aa' href='#'>超链接</a>
<a class='bb' href='#'>超链接1</a>
</body>

css的样式

内嵌样式
在html页面的内部嵌入

<style type='text/css'>
/*样式代码*/
</style>

行内样式
通过元素的style属性直接写的样式
<标记 style=‘样式’>
外部样式
首先新建一个css文件，在html页面中通过链接或导入的方法来引用外部样式。
1.链接外部样式：<link rel='stylesheet' type='text/css' href='相对路径'>
rel:表示链接的类型，这个属性不能省略，rel=stylesheet表示链接的类型是样式表
type='text/css'：表示这个文件是css文本，可以省略
2.导入外部样式

<style type='text/css'>
@import url('相对路径');
</style>

两者区别
链接样式只能在html页面中引入外部样式；导入样式既可以在html中导入外部样式，又可以在样式文件中导入外部样式，其中导入样式在样式文件中导入外部样式的方法是

@import url('相对路径');

注释

1.html注释

 <!-- 注释内容-->

2.css注释

 /*注释内容*/

按css的位置来分类

1.内嵌样式：在html页面中，以<style>开头，以</style>结束，这里面的样式只能供本页面使用
2.外部样式：写一个css文件，在需要使用css的页面中引入外部css，我们可以将页面公用的css写到外部css中
3.行内样式：通过元素的style属性直接写的样式

样式的继承

子元素覆盖和继承父元素的样式，如果父元素有，子元素没有，子元素继承父元素的样式，如果父元素有，子元素也有，子元素覆盖父元素的样式。

样式的优先级

1.id样式>class样式>标签样式
2.行内样式>内嵌样式>外部样式

应用多个类样式

以程序的执行先后为优先级，后执行的将先执行的覆盖

强制优先级

语法：!important

<style type='text/css'>
p{
color:red; !important
}
</style>

权重叠加

标签<类<id<行内<important
1<10<100<1000<10000

标记的显示模式

行显示标记
1.标记是从左往右排
2.特性：
a.从左往右排列
b.如果不指定高度，高度是0
c.如果不指定宽度，宽度是0
d.不能指定宽度和高度
e.转换成块显示：display:block
f.如果<a>标记转成块显示以后，可以设定宽度和高度，但是排列变成了上下排列，如果要实现左右排列的同时还要设定宽度和高度，可以将现实模式设置为：display:inline-block
块显示标记
1.标记从上往下排
2.特性：
a.从上往下排
b.如果不指定宽度，默认宽度是100%
c.如果不指定高度，默认高度是0
d.可以设置宽度和高度

拼板中使用非常多的两个块标记：

<div>
1.块显示标记
2.跨段块标记，div中可以放标题，段落，图片，文字
<span>
1.行显示标记
2.跨字符块标记，span中只能放文字

dic+css排版

优点：执行效率高

盒子模型

边界-margin
盒子的外面叫边界，边界有4个，上下左右
填充-padding
盒子的里面叫填充，填充有4个，上下左右
边框-border
盒子的本身有边框，边框有4个，上下左右
什么是盒子
只要是能存放内容的标记都是盒子，最大的盒子是html标记

float属性(浮动属性)

改变块元素对象的默认显示方式
浮动元素会被移出标准流

clear属性(清除浮动的影响)

clear是清除浮动，同时将边界的属性同时清除，所以使用了clear属性的盒子无法使用边界属性

CSS知识点

猜你喜欢

热点阅读