CSS语法

最新推荐文章于 2025-04-30 10:10:09 发布

cidaibian1932

最新推荐文章于 2025-04-30 10:10:09 发布

阅读量188

点赞数

原文链接：https://my.oschina.net/jiMap/blog/665916

版权

二、CSS语法

p{color：red;}

选择器{属性名：属性值 ;}

选择器后一定是大括号.属性名后必须用冒号隔开.属性值后用分号

属性名和冒号之间最好不要有空格。

表示这是样式表,在中间放入 css 内容； type是它的类型属性，text/css是它的值，它们是告诉浏览器这里面的文本内容(text)要当层叠样式表 (css)来解析，不能当作其它的来解析。

三、CSS和HTML的结合方式

CSS代码理论上位置是任意的，但通常写在style标签里

CSS和HTML的结合方式有3种：

a. 行级样式表:采用style属性,范围只针对此标签适用

b. 内嵌样式表:采用<style>标签完成。范围针对此页面

c. 外部样式表: 采用建立样式表文件。针对多个页面.

引入样式表文件的方式:

1):采用<link>标签

eg:<link rel = "stylesheet" type = "text/css" href = "a.css"></link>

2):采用import，必须写在<style>标签中，并且必须是第一句

eg: @import url(a.css) ;

两种引入方式的区别：

外部样式表中不能写<link>标签,但是可以写import语句

四、CSS选择器

选择器分为两大类:

1.基本选择器

a.标签选择器:指的就是选择器的名字代表html页面上的标签

color:red ;

border:1px dashed green;

}

b.类选择器：规定用圆点.来定义

优点：灵活

eg:

.one{background-color:#ff0099; }

c. ID选择器：规定用#来定义

eg:

#one{cursor:hand; }

区别：标签选择器针对的是页面上的一类标签.

类选择器可以供多种标签使用.

ID选择器是值供特定的标签(一个). ID是此标签在此页面上的唯一标识。

d:通用选择器：用*定义,代表页面上的所有标签。

font-size:30px;

margin-left:0px;

margin-top:0px;

}

2.扩展选择器

a. 组合选择器:采用逗号隔开，表示采用多种标签

eg:

p,h1,h2,.one,#two{color:red ; }

b. 关联选择器(后代选择器): 采用空格隔开

eg: h4 span i{color:red ; }

表示h4标签中的span标签中的i标签的样式

h4和span和i标签不一定是紧挨着的。

c. 伪类选择器

1) :静态伪类：规定是用:来定义.只有两个.只能用于超链接.

:link表示超链接点击之前的颜色

:visited表示链接点击之后的颜色

eg: a:link{color:red ;}

a:visited{color:yellow;}

注意： a:link{}定义的样式针对所有的写了href属性的超链接(不包括锚)

a{}定义的样式针对所有的超链接(包括锚)

2) :动态伪类 : 针对所有的标签都适用

:hover : 是移动到某个标签上的时候

，停留、悬停时出现效果。

:focus : 是某个标签获得焦点的时候

:active : 点击某个标签没有放松鼠标时，按下时的状态。

eg: label:hover{color:#00ff00; }

input:focus{

background-color:#ff9999;

border:1px solid red;

}

p:active{

color:blue;

}

</head>

<input type="text">//引用了一个输入框，当输入时变成focus所定义的颜色

<lable>hover当鼠标停留时改变颜色</lable>

<p>active鼠标按住没放出现蓝色</p>

五、CSS各种选择器的冲突(掌握)

CSS样式的冲突:

1.ID选择器 > 类选择器 > 标签选择器

2.行级样式表 > 内嵌样式表 > 外部样式表

外部样式表的ID选择器 > 内嵌样式表的标签选择器

原则：就近原则（指靠近使用代码段的远近）

比如同样使用

.one和.two类选择器

.one

{

color:green;

}

.two

{

color:blue;

}

</head>

<p class"one two">显示为蓝色</p>

若顺序相反

.two

{

color:blue;

}

.one

{

color:green;

}

<p class"one two">显示为绿色</p>

2016/1/18

一，link的rel属性

1,styleshee t定义样式表（默认）

2,alternate stylesheet候选样式表

(IE-工具—查看—样式)

二,css单位

1，相对单位- px，em(印刷单位) ;

%（周围文字中-比后面表示放大或者缩小倍率）

2，绝对单位- cm,mm,pt(英寸)，pc(派卡)

eg:

｛

font-size:0.5cm;

font-size:200%;

font-size:2px;

}

三，字体属性

font-size(字体大小)

font-famile(字体样式)：华文彩云，幼圆，黑体；//当华文彩云不支持时，切换为幼圆。全都不支持，系统默认

font-style:italic ; /*斜体*/

font-weight:bold; /*粗体*/

font-variant:small-caps; /*小写变大写*/

四，文本属性

*文本设置

letter-spacing:0.5cm ; /*字母间距*/

word-spacing:1cm; /*单词间距*/

text-align:center; /*在所包含容器的中间*/

text-decoration:overline; /*字体修饰 underline下划线 line-through中划线 overline上划线*/

text-transform:lowercase; /*单词字体大小写*/

}

五，*背景设置

body{

background-color:#ff99ff ; /*背景颜色*/

background-image:url(images/2.gif) ; /*背景图片*/

background-repeat: no-repeat; /*no-repeat不要平铺，repeat-x,横向平铺，repeat-y 纵向平铺*/

background-position:center right; /*背景位置*/

background-attachment: scroll ; /*背景的移动 ,fixed跟着滚动条一起移动，scroll 不动*/

六，列表属性

*列表设置

ul li{

list-style:none; /*列表前样式*/

list-style-image:url(images/2.gif) ; /*列表项前图片*/

margin-left:80px;

}

七，*盒子模型

(border margin padding)

padding:是内容到边的距离

border: 是边的粗细

margin:是控件到控件的距离

margin:1px 2px 3px 4px(右上左下)

右外边距1px、上外边距2px、左外边距3px、下外边距4px

八，定位设置

1，绝对定位 position:absolute;//按照父容器选择，可层叠（z-index）

使用 left ， right ， top ， bottom
2相对定位 position:relative;//按照原位置选择，不可层叠

left ， right ， top ， bottom

eg:

{

position: absolute或relative;

left:100px;//横坐标

top:100px;//纵坐标

}

float 浮动注：

clear : none允许两边浮动 | left不允许左边浮动 | right不允许右边有浮动 | both不允许有浮动
overflow 超过范围解决方案

取值

visible :　默认值。不剪切内容也不添加滚动条。假如显式声明此默认值，对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效

auto :　在必需时对象内容才会被裁切或显示滚动条

hidden :　不显示超过对象尺寸的内容

scroll :　总是显示滚动条

z-index x-y-z轴上的z轴，数值越小，在图层的越下面,取值为auto或者整数值（决定图层展示在第几层）

#d1

{

float:left；

clear:both;

overflow:auto;

z-index:1;

}

九，鼠标样式设置

cursor:hand或者 pointer;手势

cursor:help;问号手势

十,滤镜

转载于:https://my.oschina.net/jiMap/blog/665916