层叠样式表--css（一）_淘宝网层叠样式表文档-优快云博客

本文深入讲解CSS样式表的三种引用方式及其优先级，包括行内样式表、页面内样式和外部样式表。详细介绍了各种CSS属性如color、text-align、font-weight等的使用方法，以及选择器的定义方式，如类选择器、标签选择器和ID选择器。同时，文章还解释了如何使用后代选择器和父子选择器来精准定位元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一基本格式

（一）样式表的引用方式

1、行内样式表

<any style="样式名：样式值;"></any>
2、页面内样式

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        标签名{
	       样式名：样式值；
	    }
    </style>
</head>

3、外部样式表

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="链接样式表文件.css"/>
</head>

三种样式表的优先级：行内>页面内>外部

（二）属性

color:red; //字体颜色：红色
text-align:center; //文本居中 left/center/right/justify 左/中/右/两端对齐
font-weight:bold; //字体加粗 bold/bolder
font-style: italic; //字体倾斜
text-decoration: underline/none; //下划线/去掉下划线
font-size:19px; //字体大小：19像素；
font-family:宋体；
font:19px 宋体; //字体大小字体；
background:背景颜色背景图片背景是否重复背景定位位置 //背景图片 url(图片路径) 是否重复 repeat/no-repeat/repeat-x/repeat-y 重复/不重复/水平重复/垂直重复背景定位位置 left/center/right 水平左中右 top/center/bottom 垂直上中下
background-size:精确像素/百分比 /em/rem //背景图片大小控制
background-attachment: scroll; //背景图片固定定位 scroll 滚动 fixed 固定
width:400px; 宽度
height:300px; 高度
border:solid 1px #000; //边框线：实线 1像素黑色
线型：solid 实线 double 双线 dotted 点状线 dashed 虚线 none无边框线
浮动：float:left /right 左浮动、右浮动
margin:0 auto;//水平居中
文本转换 text-transform:uppercase/lowercase/capitalize //大写、小写、首字母大写
列表：list-style-type 列表样式 //list-style-image 列表图片
display:block; 转换为块级元素（占一行）
display:inline-block; 转换为行内块（宽高起作用）
display:inline; 转换为行内元素（占内容位置）
display：block 显示
display:none 隐藏
visibility: hidden;隐藏
visibility:visible; 显示（display和visibility区别：display隐藏不占位置//visibility隐藏占位置）

————————————

border-style 值：

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

————————————

1. 填充：padding-top/padding-left/padding-right/padding-bottom

简写：padding:值
padding:a //一个值表示四边相同的填充
padding:a b; //两个值表示上下是a，左右是b
padding:a b c; //三个值表示上是a,左右是b,下是c
padding:a b c d; //四个值表示：上，右，下，左

2. 边距：margin-top/margin-left/margin-right/margin-bottom

简写：margin:值
margin:a //一个值表示四边相同的填充
margin:a b; //两个值表示上下是a，左右是b
margin:a b c; //三个值表示上是a,左右是b,下是c
margin:a b c d; //四个值表示：上，右，下，左

3. *{ //通配符

margin:0;

padding:0;}

4. 行高 ling-height 行间距，一般用行高布局垂直对齐方式。

行高和高度（height）一致，内容在垂直正中间；
行高比高度大，内容在偏下；
行高比高度小，内容偏上。

5. 首行缩进：text-indent:2em; //首行缩进两个字符

（三）选择器的定义方式

类选择器的定义方式（可多次调用）：.name{} //class="name"
标签选择器的定义方式（只要符合标签，都自动调用）：.标签{}
ID选择器定义方式（只能调用一次）：#name{}
伪类选择器：超链接四种状态 //a:link 访问前的状态//a:hover 鼠标悬停时状态//a:active 鼠标点击时的状态//a:visited 访问后的状态
后代选择器：格式：父元素/祖先元素子元素（eg : div a / .nav a）
父子选择器：格式：父元素>子元素（eg: .box>a）