CSS

首页 > 代码库 > CSS

2024-08-14 16:51:08 225人阅读

样式表
CSS（Cascading Style Sheets，层叠样式）；
作用是美化HTML页面。
/*………….*/ 注释语法
? 样式表的基本概念
样式表分为内联样式表、内嵌样式表和外部样式表，其中以内联式和内嵌式常用。
? 内联样式表
和HTML联合显示，控制精确，但是可重用性差，冗余多。
例：<p style=”font-size:14px;”>内联样式表</p>
? 内嵌样式表
作为一个独立区域内嵌在网页里，必须写在head标签里面。
<style type=”text/css”>
P //格式对p标签起作用
｛
样式：

｝</style>
③外部样式表
新建一个CSS文件，用来放样式表，如果要在HTML文件中调用样式表，需要再HTML文件中点右键-----CSS样式-----附加样式表，一般用link连接方式。

有些标签亦默认的边距，一般写样式表代码的时候都会先去除（也可以设置其他样式），如下：
<style type=”text/css”>
* //格式对所有标签起作用
｛
Margin:0px
Padding:0px
｝
</style>

2、选择器

? 标签选择器。用表签名做选择器。
<style type=”text/css”>
p //格式对p标签起作用
｛
Margin:0px
Padding:0px
｝
</style>

? Class选择器，都是“.”开头。

<head>
<style type=”text/css”>
.mai /*定义样式*/
｛
Height:40px;
Width:100%;
Text-align:center;
}
</style>
<head>
<body>
<div class=”main”> <!—调用class样式-->
</div>
</body>

? ID选择器，以“#”开头。
<div id=”样式名”>
<head>
<style type=”text/css”>
#mai /*定义样式*/
｛
Height:40px;
Width:100%;
Text-align:center;
}
</style>
<head>
<body>
<div id=”main”> <!—调用id样式-->
</div>
</body>
? 符合选择器
? 用“，”隔开，表示并列
<style type=”text/css
p ，span /*标签p、span两者同样的样式*/
｛
样式
｝
</style>

? 用space隔开，表示后代。
<style type=”text/css”>
.main p /*找到使用样式“main”的标签，在该标签里的p标签使用该样式*/
｛
样式
｝
</style>

3）筛选“.”
<style type=”text/css”>
p.sp /*在标签p中的class=”sp”的标签，执行以下样式*/
｛
样式
｝
</style>

? 样式属性

? 背景
Background-color:#90 ------背景色，样式表优先级高
Background-image:url ------背景图片，图片名称不可含有汉字
Background-atachment:fixed ------fixed 背景固定，不随文字滚动；
Scroll 随文字滚动
Background-repeat:no-repeat -----no-repeat 不平铺
Repeat 平铺
Repeat-x 横向平铺
Repeat-y 纵向平铺
Background-position:center -----center 背景图居中，设置背景图位置时，repeat必须为no-repeat；
Right top 右上角
Left bottom 左下角
Left 100px top 200px 背景图距离左边100像素，顶部200像素（可以设为负值）
Background-size:200px 300px ------背景图尺寸，宽200px space高300px；
也可设100% 200px，宽度100%，高度200px。
? 前景（又称文字）
font-family:新宋体 ------字体样式，常用新宋体、微软雅黑。
font-size:12px ------字体大小，常用大小为12px、14px、18px。
还可以用“em”，2.5em表示默认字体的2.5倍。
也可用百分数表示。
font-weight:bold ------bold 加粗，normal 正常。
Font-style:italic ------italic 倾斜，normal 不倾斜。
Color:#300 ------字体颜色。
Text-decoration:underline -------underline 下划线
overline 上划线
line-through 删除线
none 去掉下划线
text-align:center ------（水平对齐）center 居中对齐
left 左对齐
right 右对齐
vertical-align:midlle ------（垂直对齐）middle 居中对齐
top 顶部对齐
bottom底部对齐（一般设置行高后使用）
text-indent:28px -------文字首行缩进量
line-height:24px -------行高，一般为1.5~2倍的字体大小
display:none ------none 不显示；inline-block 显示为块，不自动换行，宽高可设；block 显示为块，自动换行；inline 效果同span标签，不自动换行，宽高不可设。
Visibility:hidden ------visibility 可视性；
hidden 隐藏但是占空间；
visible 显示
? 边界边框
border （表格边框、样式等）、margin（表外间距）、padding（内容与单元格间距）、
简写：border:5px solid blue; ------四边框：5像素宽、实线、蓝色
分写：border-width:5px;
Borde r-style:solid;
border-color:blue;
单边框：border-top:5px solid blue; ------上边框：5像素宽、实线、蓝色
border-tight:5px solid blue; ------右边框：5像素宽、实线、蓝色
border-bottom:5px solid blue; ------底边框：5像素宽、实线、蓝色
border-left:5px solid blue; ------左边框：5像素宽、实线、蓝色
单边框分写同上。

margin:10px; -------四边外边框为10像素。auto，居中。
margin-top:10px; -------上边外边框宽度为10像素；其他三边边框类似。
Margin:20px 0px 20px 0px; -------上、右、下、左，内容与边框的四边间
距上右下左是默认的顺序。如果默认靠近上、左，设置上、左的值有作用。

Padding:10px; -------内容与边框的四边间距为10px。
Padding-top；10px ------内容与边框的上间距为10px.
Padding:20px 0px 20px 0px -------上、右、下、左，内容与边框的四边间
距上右下左是默认的顺序。如果增加了
内边距，该元素会相应增大。

? 列表与方块
width、height （top bottom left right）只有在绝对坐标情况下才有用。
list-style:none; --------取消序号
list-style:circle -------序号变为圆圈“。”，样式相当于无。
List-style-image:url……（图片地址）； --------图片作为序号。
list-style-position:outside -------序号在内容外边
inside 序号在内容里边。
? 格式与布局
? Position :fixed; 锁定位置（相当于浏览器的位置），例如有些网站的右下角的弹窗。
? Position : absolute; 绝对位置
? 外层没有position : absolute（或relative）;那么div相对于浏览器定位。如下图中b（距离浏览器的右边框50像素，距离浏览器的下边框20像素）
? 外层有position : absolute（或relative）;那么div相对于外层框定位。如下图中bb（距离d的右边框50像素，距离d的下边框20像素）

.b
{
border:5px solid blue;
width:100px;
height:100px;
margin:10px;
background-color:pink;
right:50px;
bottom:20px;
position:absolute;
}
.c
{
border:2px solid red;
width:400px;
height:200px;
}
</style>
<style type="text/css">

.d
{
border:2px solid blue;
width:400px;
height:200px;
position:absolute;
}
</style>
</head>

<body>
<div class="c">c

</body>
</html>

3）position : relative; 相对于默认位置的移动。如下图，a在用relative移动前的位置，aa为用relative
移动后的位置，aa距离原位置上部间距50像素，距离原位置左边距20像
素。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>123</title>

#a
{
border:5px solid blue;
width:100px;
height:100px;
margin:10px;
background-color:pink;
position:fixed;/**/
}
#aa
{
border:5px solid blue;
width:100px;
height:100px;
margin:10px;
background-color:pink;
position:relative;
left:20px;
top:50px
}
</style>

</head>

<body>
<div id="a">a
</div>
<div id="aa">aa

</div>
</body>
</html>

? 分层（z-index）
页面里有X轴、Y轴。Z轴，X轴代表横向，Y轴代表纵向，Z轴代表垂直在z轴方向分层，可以理解为分层一摞纸，谁的z-index值越高越靠上，必须配合float、position使用。
在上面relative的示例中，我们看到aa盖住了a，这是因为后写代码会盖住前面先写的代码，那么在不改变代码编写顺序的情况下如何让a盖住aa，如下图所示

.a
{
border:5px solid blue;
width:100px;
height:100px;
margin:10px;
background-color:pink;
position:fixed;
z-index:2;/*这里做一下修改，默认情况下，都是第一层，z-index的*/
}
.aa
{
border:5px solid blue;
width:100px;
height:100px;
margin:10px;
background-color:pink;
left:20px;
top:50px;
position:relative;
left:20px;
}
</style>

</head>

<body>
<div class="a">a
</div>
<div class="aa">aa

</div>
</body>
</html>

? 流float：left、tigh
Overflow:hidden; //超出部分隐藏；croll显示出滚动条。
<div style=”clear:both”></div> //截断流，当所写的div代码不在同一平面上时，浮动后后写的div会自动默认位置（覆盖到浮动的下面），此时需要截断流。
：hover｛background-color:red;
Color:white;
Cursor:pointer;｝ //表示鼠标放上来后，背景色变为红色，文字颜色变为白色，鼠标样式变为小手。
&copy:版权符号
? 半透明效果
<div class=”box”>透明区域</div> //样式表中代码，由于浏览器兼容所以三种样式都写上。
.box
{
Opacity:0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50)
}
? 其他
Display:none //none隐藏，block显示；用这两个来让经常用于JS动态的控制某个元素的隐藏或显示，鼠标放上二级菜单显示，鼠标拿走二级菜单隐藏。隐藏不占位置
Visibility:hidden //hidden 隐藏，visible显示。虽然隐藏但是占位置。
Overflow:hidden //overflow 超出部分，hidden超出部分隐藏，scroll 超出部分滚动条显示。
Border-radius:5px //div圆角，像素是半径，像素越大圆角越大。
Box-shadow:1px 2px 5px 10px white //div阴影，1px代表阴影距离X轴，2px代表距离Y轴，10px代表阴影大小，white代表阴影颜色。

CSS

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

联系
我们

首页 > 代码库 > CSS

CSS

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