CSS

flash20230513

于 2024-08-14 22:57:41 发布

阅读量699

点赞数 27

文章标签： css

本文链接：https://blog.csdn.net/h_e_l_l_o_______/article/details/141201911

版权

注释

/*单行*/
/*
多行
*/

样式选择器，属性名，属性值关键字全部使用小写字母

<head> 
	<style> 
		p { 
			color: red; 
		} 
	</style> 
</head>

字体属性

用于定义字体系列、大小、粗细、和文字样式

字体系列

font-family属性定义文本的字体系列。
允许您指定一个或多个字体名称或通用字体族名称（从左到右的顺序表示优先级递减），以便浏览器在渲染文本时使用。
指定多个值可以提高字体可用性，如果首选字体不可用（例如，用户的系统没有安装该字体），浏览器将尝试使用列表中的下一个字体。
当使用自定义Web字体时，如果字体文件未能正确加载或加载时间过长，浏览器可以回退到系统字体，保证文本的可读性

p {
    font-family: "Microsoft YaHei UI", Arial, sans-serif;
}

字体粗细

可以用数字表示粗细
默认：normal（不加粗） = 400
加粗：bold = 700

p {   
	font-weight: bold;
}

文字样式

p {   
	font-style: normal; /*默认：标准样式*/
	font-style: italic; /*斜体*/
}

字体复合属性

不能更换顺序
以空格隔开
必须保留 font-size 和 font-family

body {  
	font: font-style  font-weight  font-size/line-height  font-family; 
}

文本属性

可以定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

.className {
    /* 文本颜色
        预定义值：red, blue, green, yellow, black, white, gray, ...
        RGB代码：rgb(255, 0, 0), rgb(100%, 0%, 0%)
        十六进制（常用）：#ff0000, #FF6666
     */
    color: red;
    /*  文本对齐
        用于设置元素内文本内容的水平对齐方式。
        left, right, center
     */
    text-align: center;
    /*  装饰文本
        默认值：none,没有装饰线
        underline 下划线
        overline 上划线
        line-through 删除线
     */
    txet-decoration: underline;
    /*  文本缩进
        指定文本的第一行的缩进，通常是将段落的首行缩进。
        em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小,
        如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。
     */
    text-indent: 10px;
    text-indent: 2em;
    /*  行间距
        用于设置行间的距离（行高）。可以控制文字行与行之间的距离,
        让文字的行高等于盒子的高度（height属性），就可以让文字在当前盒子内垂直居中。
     */
    line-height: 25px;
}

引入方式

内部样式表
<style> 
	div { 
		color: red;
	} 
</style> 
行内样式表
<div style="color: red;"></div>
外部样式表
<link rel="stylesheet"  href="css文件路径">

基础选择器

标签选择器

HTML 标签名称

p {
}

类选择器

HTML 中元素的 class 属性

.className {
}

标签多个类名，以空格隔开

<div class="className1 className2">

id选择器

#id {
}

通配符选择器

选取页面中所有元素（标签）

* {
	margin: 0;/*清除所有元素的 外 边距*/
	padding: 0;/*清除所有元素的 内 边距*/
}

复合选择器

后代选择器

/*  选择 ul 里面所有的 li 标签元素  */
ul li { 样式声明 }

子选择器

/*  选择 div 里面所有最近一级 p 标签元素  */
div > p { 样式声明 }

并集选择器

/*  多个选择器用英文逗号隔开  */
ul,div { 样式声明 }

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果

/* 未访问的超链接为 红色 */
a:link {
    color: red;
}
/* 访问过的超链接为，蓝色 */
a:visited {
    color: blue;
}
/* 鼠标经过时，变成绿色 */
a:hover {
    color: green;
}
/* 鼠标按下时，变成黄色 */
a:active {
    color: yellow;
}
/* 获取焦点时，变成黑色 */
input:focus {  
	color:black; 
}

元素显示模式

块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等。
块级元素的特点：

独占一行。
高度，宽度、外边距以及内边距都可以控制。
宽度默认是容器（父级宽度）的100%。
里面可以放行内或者块级元素。

注意：文字类的元素（<p>、<h1>…）内部不能使用块级元素

行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等。
行内元素的特点：

相邻行内元素在一行上，一行可以显示多个。
高、宽直接设置是无效的。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。

注意：链接 <a> 里面不能再放链接，可以放块级元素，但是给 <a> 转换一下块级模式最安全。

行内块元素

在行内元素中有几个特殊的标签 <img />、<input />、<td>，它们同时具有块元素和行内元素的特点。
行内块元素的特点：

和相邻行内元素（行内块）在一行上，他们之间会有空白缝隙。一行可以显示多个。
默认宽度就是它本身内容的宽度。
高度，行高、外边距以及内边距都可以控制。

元素显示模式转换

转换为块元素：display: block;
转换为行内元素：display: inline;
转换为行内块：display: inline-block;

背景

背景颜色

默认是透明

background-color: transparent;

背景图片

默认是 none，url 地址不要加引号

background-image: url(url);

背景平铺

默认是 repeat （横向纵向平铺）
no-repeat：（不平铺）
repeat-x：（横向平铺）
repeat-y ：（纵向平铺）

background-repeat: repeat;

背景图片位置

px表示相对于元素左边缘向右偏移的像素。
%表示相对于元素宽度百分比。

top 表示顶部对齐。
bottom 表示底部对齐。
left 表示左侧对齐。
right 表示右侧对齐。
center 表示水平和垂直方向都居中。

top left 表示顶部左侧对齐。
50% 50% 表示水平和垂直方向都居中

background-position: x-offset y-offset;

背景图像固定（背景附着）

设置背景图像是否固定或者随着页面的其余部分滚动。
fixed：背景图像固定
scroll：背景图像随着页面的其余部分滚动

background-attachment : scroll | fixed

背景复合写法

background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;

background: transparent url(image.jpg) repeat-y  fixed  top ;

背景色半透明

最后一个参数是 alpha 透明度，取值范围在 0~1之间

background-color: rgba(0, 0, 0, 0.3);

三大特性

层叠性

后者覆盖前者

div {
    color: red;
}
div {
    color: blue;
}

继承性

/*此时 body 内部元素的 color 属性都是 red */
body {
    color: red;
    font: 12px/1.5 Microsoft YaHei;
    /*这里的 1.5 是行高，子元素继承后的行高等于 字体大小 * 1.5。*/
}

优先级

优先级注意点:
权重是有4组数字组成,但是不会有进位
如果是复合选择器，则会有权重叠加

选择器	选择器权重
继承或通配符	0,0,0,0
元素选择器	0,0,0,1
类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式	1,0,0,0
!important	无穷大

盒子模型

CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和内容。

边框

边框有三部分组成：边框宽度、边框样式、边框颜色

/*设置四条边，三个属性没有顺序 */
border : border-width border-style border-color
/*单独设置某条边*/
border-bottom
border-top
border-left
border-right

边框合并

设置相邻边框合并在一起，例如 table

border-collapse: collapse;

两个相邻div合并边框：把不需要的边设置为 -1px

margin: 0 0 -1px 0;

边框宽度

边框的宽度会额外增加盒子的实际大小，因此需要将 width/height 减去边框宽度

边框样式

none：没有边框（默认值）
solid：单实线
dashed：虚线
dotted：点线

内边距（padding）

边框与内容之间的距离
内边距也会影响盒子的实际大小，因此需要将 width/height 减去内边距
如果盒子本身没有指定 width/height 属性, 则 padding 不会撑大盒子

padding-bottom
padding-left
padding-right
padding-right
/*简写*/
padding: 5px; /*上下左右*/
padding: 5px 10px; /*上下 左右*/
padding: 5px 10px 15px; /*上 左右 下*/
padding: 5px 10px 15px 20px; /*上 右 下 左*/

外边距（margin）

用于设置外边距，控制盒子和盒子之间的距离

margin-bottom
margin-top
margin-left
margin-right
/*简写*/
margin: 5px; /*上下左右*/
margin: 5px 10px; /*上下 左右*/
margin: 5px 10px 15px; /*上 左右 下*/
margin: 5px 10px 15px 20px; /*上 右 下 左*/
/*让块级盒子水平居中：必须指定了宽度*/
margin: auto;
margin: 0 auto;

外边距合并

垂直外边距合并

当上下相邻的两个盒子垂直外边距相遇时，它们将合并为一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

嵌套块元素垂直外边距的塌陷

父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。外边距也是取较大者

清除内外边距

* {
  padding: 0;
  margin: 0;  
}

圆角边框

数值可以为数值或百分比，百分比是相对于盒子的宽度和高度

border-radius: 10px;
/*简写*/
border-radius: 10px 20px; /*上左和下右 上右和下左*/
border-radius: 10px 20px 30px 40px; /*上左 上右 下右 下左*/
/*分开写*/
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

盒子阴影

值	描述
h-shadow	必需，水平阴影的位置。
v-shadow	必需，垂直阴影的位置。
blur	模糊距离。
spread	阴影的尺寸。
color	阴影的颜色。
inset	外部阴影改为内部明影。

box-shadow: h-shadow v-shadow blur spread color inset;

文字阴影

值	描述
h-shadow	必需，水平阴影的位置。
v-shadow	必需，垂直阴影的位置。
blur	模糊距离。
color	阴影的颜色。

text-shadow: h-shadow v-shadow blur color;

浮动

传统网页布局的三种方式

普通流
块级元素独占一行，行内元素在一行显示
浮动
定位

网页布局第一准则：先用标准流的父元素排列上下位置, 之后内部子元素用浮动排列左右位置
网页布局第二准则：先设置盒子的大小, 之后设置盒子的位置

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

float: left | right | none;

浮动特性

浮动元素会脱离标准流，会浮在标准流的上面
浮动元素会在一行内显示并且元素顶部对齐
浮动元素会具有行内块元素的特性

清除浮动

为什么需要清除浮动？

父级没高度。
子盒子浮动了。
影响下面布局了。

清除浮动的本质是清除浮动元素造成的影响
清除浮动的策略是: 闭合浮动

clear: left | right | both;

1. 额外标签法

额外标签法也称为隔墙法，是 W3C 推荐的做法。
在浮动元素末尾添加一个空的块级标签，设置 clear: both 清除浮动。
例如 <div style="clear:both;"></div>

2. 父级添加overflow属性

缺点：无法显示溢出的部分

overflow: hidden | auto | scroll;

3. 父级添加after伪元素

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {  /* IE6、7 专有 */
    *zoom: 1;
}

4. 父级添加双伪元素

.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
.clearfix {
    *zoom:1;
}

拓展

无序列表去掉前面圆点

list-style: none;

flash20230513

关注

27
点赞
踩
6

收藏

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

样式选择器，属性名，属性值关键字全部使用小写字母pcolor;</</
复制链接

扫一扫