CSS

最新推荐文章于 2022-11-16 11:43:29 发布

CodeBaker

最新推荐文章于 2022-11-16 11:43:29 发布

阅读量96

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_19332219/article/details/104499224

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

好处：

功能强大
将内容展示和样式控制
1. 降低耦合度，解耦
2. 让分工更加

使用：

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

浏览器缺省设置
外部样式表
内部样式表（位于标签内部）
内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

基础选择器：

优先级：id 高于类高于属性

  <style>
        #id{
            color:green;
        }
         /*ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。*/
        p.div{
            color:blue;
        }
        div{
             color:red;
         }
    </style>


<body>
<div id="id" class="div">
    div例
</div>
<div class="div">
    div例
</div>
<div>
    div例
</div>
<p  class="div">
    p例
    </p>

扩展选择器

1.选择所有元素：

*{}

2.并集选择器

3.子选择器：筛选选择器1下的选择器2

div p{

}

<div>
<p>
</p>
</div>

筛选选择器2的父选择器1

div>p{

}

<div>
<p>
</p>
</div>

属性选择器：选择元素名称，属性名，属性值
伪类选择器：选择一些元素具有的状态
- 语法：元素:状态()
- 如：
- 状态：
- link:初始化的状态
- visited：被访问状态
- active：正在访问的状态
- hover：鼠标悬浮状态

背景：

background-color
background-image
background-repeat
background-attachment
background-position

<style>
body{
	background-color:#b0c99e;
    background-image:url('smiley.gif');
	background-repeat:no-repeat;
	background-attachment:fixed;
    background-position:right top; 
	}	
</style>

文本

文本颜色
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
对齐方式
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
文本修饰
a {text-decoration:none;}
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
文本转换
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
文本缩进
p {text-indent:50px;}
设置文本方向
direction
设置字符间距
letter-spacing
设置行高
p{line-height:120%;}
规定文本块中首行文本的缩进。
text-indent:50px;
基本文字阴影
{text-shadow:1px 1px #FF0000;}
文字阴影+模糊的距离。
h1 {text-shadow:2px 2px 10px #FF0000;}

字体

字体样式
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
字体大小
px/16=em
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

链接

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
要求
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

文本修饰
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

背景颜色
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

列表

<style>
ul.a {list-style-type:circle;}
ol.c {list-style-type:upper-roman;}
ul 
{
	list-style-image:url('sqpurple.gif');
}
指定列表项标记的图像，使用列表样式图像属性：
</style>

盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FaYbPqFP-1582617810416)(…/web.assets/u=4291524412,917650692&fm=26&gp=0.jpg)]

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。

表格的边框合并

table,th,td{
border:1px solid pink;
border-collapse: collapse;
text-align:center;
}

边框会使盒子大小变大

内边距

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P4FSWAwQ-1582617810418)(…/web.assets/image-20200220180809782.png)]

外边距

浮动

水平居中

1. 块状元素水平居中

div.auto{
            width:1400px;
            height:200px;
            margin:100px auto;
        }

2.行内元素

或者行内块状元素水平居中只需要在其父元素中添加text-align:center

内边距

[外链图片转存中…(img-P4FSWAwQ-1582617810418)]

外边距

浮动

水平居中

1. 块状元素水平居中

div.auto{
            width:1400px;
            height:200px;
            margin:100px auto;
        }

2.行内元素

或者行内块状元素水平居中只需要在其父元素中添加text-align:center

CodeBaker

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS

CSS层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。好处：功能强大将内容展示和样式控制降低耦合度，解耦让分工更加使用：一般而言，所有的样式会根据下面的规则层...
复制链接

扫一扫

专栏目录