css基础

最新推荐文章于 2024-09-11 20:12:18 发布

xuxuxuxxxxx

最新推荐文章于 2024-09-11 20:12:18 发布

阅读量1.8k

点赞数 34

文章标签： css

本文链接：https://blog.csdn.net/2301_80697981/article/details/139112544

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

一、css是什么？
二、规则构成
三、样式表类型
四、注释
五、样式选择器
- id选择器
- class选择器
六、背景
七、边框
八、文字属性
九、文本属性

一、css是什么？

css 层叠样式表

是一种用来表现html或xml等文件样式的计算机语言。

可以静态的修饰网页，配合各种脚本语言动态地对网页各元素进行格式化。

二、规则构成

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

选择器通常是需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。

p {color:red;text-align:center;}

/*p为选择器*/
/*color:red为声明，color为属性，red为值 */

三、样式表类型

1、内部样式表

当单个文档需要特殊的样式时使用。
使用 <style> 标签在文档头部定义内部样式表

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

2、外部样式表

当样式需要应用于很多页面时使用。
每个页面使用<link>链接到样式表

/*<link> 标签在（文档的）头部*/
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

/*样式表文件  （不能包含任何的 html 标签）*/
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

3、内联样式

将表现和内容混杂在一起。
在相关的标签内使用样式（style）属性，Style 属性可以包含任何 CSS 属性。

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

4、多重样式优先级

内联>内部>外部>浏览器默认

四、注释

/* 注释 */

五、样式选择器

元素选择器 div{属性:值}
ID选择器 #id{属性:值}
class选择器 .类名{属性:值}
子选择器元数空格元素{属性:值}
后代选择器元数 > 元数{属性:值}
属性选择器元素[属性]{}
通配符选择器 *{属性:值}
群组选择器

id选择器

可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器，CSS 中 id 选择器以 “#” 来定义。
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

/*以下的样式规则应用于元素属性 id="para1"*/
#para1
{
    text-align:center;
    color:red;
}

class选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示
类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

/*所有拥有 center 类的 HTML 元素均为居中*/
.center {text-align:center;}

六、背景

属性	描述
background-color	颜色
background-image	把图像设置为背景
background-repeat	设置背景图像是否及如何重复
background-attachment	背景图像是否固定或者随着页面的其余部分滚动
background-position	设置背景图像的起始位置
background-size	规定背景图片的尺寸
background-origin	规定背景图片的定位区域
background-clip	规定背景的绘制区域

background-repeat 值：
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x ：背景图像将在水平方向重复。
repeat-y ：背景图像将在垂直方向重复。
no-repeat ：背景图像将仅显示一次。
inherit ：规定应该从父元素继承 background-repeat 属性的设置。
background-position 值：
inherit 规定应该从父元素继承 background 属性的设置。
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

简写
background: url(images/bg.gif) no-repeat top right

背景图片的滚动：

背景图片是否随着内容的滚动而滚动由background-attachment设置

background-attachment:fixed; 固定，不随内容的滚动而滚动

background-attachment:scroll; 滚动，随内容的滚动而滚动

七、边框

CSS边框属性允许你指定一个元素边框的样式和颜色。
边框样式：border-style

none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。效果取决于边框的颜色值

边框颜色 border-color:#000

边框宽度 border-width:1px;

border-left 设置左边框，一般单独设置左边框样式使用
border-right 设置右边框，一般单独设置右边框样式使用
border-top 设置上边框，一般单独设置上边框样式使用
border-bottom 设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。

简写
border:5px solid red;

八、文字属性

color:red; 文字颜色 #ffeeees
font-size:12px; 文字大小
font-weight:bolds 文字粗细(bold/normal)
font-family:”宋体”文字字体
font-variant:small-caps小写字母以大写字母显示

九、文本属性

text-align:center; 文本对齐(right/left/center)
line-height:10px; 行间距(可通过它实现文本的垂直居中)
text-indent:20px; 首行缩进
text-decoration:none;
文本线(none/underline/overline/line-through) underline/overline/line-through; 定义文本上的下划线/上划线/中划线
letter-spacing: 字间距