CSS

首页 > 代码库 > CSS

2024-10-29 11:07:02 210人阅读

CSS：Cascading Style Sheet 层叠样式表

CSS作用：就是给HTML页面标签添加各种样式

为什么用CSS

HTML的缺陷： 1. 不能够适应多种设备 2. 要求浏览器必须智能化足够庞大 3. 数据和显示没有分开 4. 功能不够强大

CSS 优点：1.使数据和显示分开 2.降低网络流量 3.使整个网站视觉效果一致 4.使开发效率提高了

CSS语法

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

选择器后一定是大括号。属性名后必须用冒号隔开。属性值后用分号。属性名和冒号之间最好不要有空格。

CSS代码和HTML结合的时候，CSS理论上位置是随意的，但是一般放在style标签内。他们结合的方式有三种

1.行级样式表 --->范围只是针对次标签

例： <p style = "color : red">犯我德邦者，虽远必诛！</p>

2.内嵌样式表 --->范围是这个页面

例： <style type="text/css">

color : green;

border : 1px solid black;

}

</style>

3.外部样式表，采用建立样式表文件 --->范围可以应用于多个页面

有两种方式，例1：采用link标签

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

两种写法 @import "a.css";

@import url(a.css);

用link和import的区别：两种都能引入外部样式表，但是外部样式表中不能写<link>标签,但是可以写import语句。

CSS选择器：两大类

1.基本选择器

a.标签选择器（元素选择器）选择器的名字就是html上的标签，针对的是一类标签

例：<style type="text/css">

div{

color : yellow;

}

</style>

b.类选择器，规定用原点来定义，有点是灵活。针对的是所有标签

例： <!doctype html>

<head>

<title>mycss</title>

.皇子{

cursor : hand;

}

</style>

</head>

<body>

<div class = "皇子">犯我德邦者，虽远必诛！</div>

</body>

</html>

c.ID选择器，规定用#来定义，针对的是特定的一个标签，优先级最高。

例： <!doctype html>

<head>

<title>mycss</title>

#皇子{

background : red;

}

</style>

</head>

<body>

<div id = "皇子">犯我德邦者，虽远必诛！</div>

</body>

</html>

d.通用选择器，规定用*来定义，针对的是所有标签

例： <!doctype html>

<head>

<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">

<meta name="Keywords" content="">
<meta name="Description" content="">
<title>mycss</title>
<style type="text/css">
*{
font-size : 50px;
color : yellow;
}
</style>
</head>
<body>
<div id = "皇子">犯我德邦者，虽远必诛！</div>
<p>阻断军队，粉碎山峰，跨过最长的。。。</p>
</body>
</html>

ID和类选择器的区别：一个标签的id属性的值在整个页面上是唯一的。但是name的值可以重复。

2.扩展选择器

a.组合选择器用逗号隔开

例： <!doctype html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>mycss</title>
<style type="text/css">
div,span{
font-size : 30px;
color : red;
}
</style>
</head>
<body>
<div>犯我德邦者，虽远必诛！</div>
<p>阻断军队，粉碎山峰，跨过最长的。。。</p>
<span>你要来一发么</span>
</body>
</html>

b.关联选择器用空格隔开

例： <!doctype html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>mycss</title>
<style type="text/css">
p span{
font-size : 30px;
color : red;
}
</style>
</head>
<body>
<div>犯我德邦者，虽远必诛！</div>
<p>阻断军队，<span>粉碎</span>山峰，跨过最长的。。。</p>
<span>你要来一发么</span>
</body>
</html>

c.伪类选择器

I.静态伪类。两个，用：来定义，只能用于超链接

例： <style type="text/css">

a:link{
color : #33ff00;
}

a:visited{
color : #9900ff;
}
}
</style>

a{}和a:link{}的区别：a:link{}可以实现href属性的超链接，不包括锚。a{}可以实现所有的超链接，包括锚。

II.动态伪类针对所有标签都适用

例：常用的三种

p:hover{

color : red;

}移动到某个标签上的时候

input:focus{

background-color:#ff3333;

border : 2px solid #cc9900;

color : #990000

}某个标签获得焦点的时候

p:active{

color : #990000;

}点击某个标签没有放松鼠标时

CSS各种选择器的冲突

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

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

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

原则：就近原则

CSS的各种属性

CSS的单位:

a. 绝对单位 1in=2.54cm=25.4mm=72pt=6pc , pt是点或者磅，pc是派卡

b. 相对单位：px, em(印刷单位相当于12个点), %(相对周围的文字)

字体设置：

font-size : 20px; 设置字体大小

font-family : 楷体; 设置字体

font-style : italic; 设置斜体

font-weight : bold; 设置加粗

font-variant : small-caps; 小写转换大写

}

文本设置：

letter-spacing : 0.5cm; 字符间距

word-spacing : 0.5cm; 单词间距

text-align : center; 对齐到容器的中心

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

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

color : red; 颜色

}

背景设置：

body{

background-color : yellow; 背景颜色

background-image : url(E:/day02_css/上课示例/images/1.jpg); 背景图片

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

background-position : center top; 背景位置

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

}

列表设置：

ul li{

list-style : none;

list-style-image : url(E:/day02_css/上课示例/images/2.gif);

margin : 90px;

}

盒子模型：

分为两种，一种是IE模型，一种是非IE模型

padding 内容到边框之间的距离，可以大致理解为父子之间用padding

border 边框的粗细

margin 控件与控件之间的距离，可以大致理解为兄弟之间用margin

例： <!doctype html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>mycss</title>
<style type="text/css">
div{
width : 100px;
height : 50px;
background-color : yellow;
border : 1px solid blue;
padding : 20px;
margin : 10px;
}
</style>
</head>
<body>
<div>炼金术士</div>
<div>辛吉格</div>
</body>
</html>

定位设置：

顺序流：控件一个挨一个的摆放的顺序叫顺序流

两种情况会脱离顺序流:

1. 当把控件的位置设定为绝对定位的时候。

2. 当设定控件的float属性的时候。

position: absolute 1.绝对定位：原点在包含自己的容器的左上角. left,top. 定义横纵坐标 .脱离了本身的顺序流

relative 2.相对定位：相对自己原来的位置. 相对的是自己在顺序流中原来的位置

例： <!doctype html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>mycss</title>
<style type="text/css">
* {
padding:0px;
margin : 0px;
}

#othername{
position : relative;
width : 100px;
height : 50px;
background-color : yellow;
border : 1px solid blue;
left : 30px;
top : 50px;
}
#name{
position : relative;
width : 100px;
height : 50px;
background-color : blue;
border : 1px solid yellow;
left : 10px;
top : 30px;
}
</style>
</head>
<body>
<div id = "othername">炼金术士</div>
<div id = "name">辛吉格</div>
</body>
</html>

z-index : 值任意，值越大离我们越近

例： #d1{

position:absolute;
left:100px;
top:100px;
width:200px;
height:200px;
background-color:blue;
border:2px solid red ;
z-index: 5 ;
}

overflow : 当不够显示的时候，需要用到overflow。四种取值： visible不剪切内容也不添加滚动条 | auto必要的时候会进行裁切或者加入滚动条 | hidden 不显示超过范围的内容| scroll 总是显示滚动条

float : 浮动

clear : 清除浮动

鼠标样式格式：

例： p{
cursor:pointer;
}

CSS

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > CSS

CSS

看完仍有疑问？有类似问题直接问程序猿