CSS学习

最新推荐文章于 2024-08-28 23:58:56 发布

无柳丶先生

最新推荐文章于 2024-08-28 23:58:56 发布

阅读量428

点赞数 10

文章标签： css 前端

本文链接：https://blog.csdn.net/2301_77205900/article/details/139710956

版权

CSS

全称Cascading Style Sheets

一种样式表语言，为html标签修饰定义外观，分工不同

CSS与HTML关系

html是网页的内容

css是网页的样式（结构）

行内样式表

只能对所在标签进行修饰，优先级最高，相对用的少

<a href="" class="p1">
    <font color="red">
		微博
    </font>
</a>

内嵌样式表

平常练习用的多，写在style标签内

<style>
    .p1{
        color: aqua;
        font-size: 25px;
        font-family: 宋体;
        background-color: red;
    }

/* 图片自带4像素的样式 ,可清除样式*/
	img{
		display: block;
	}
<style>

外部样式表

实际开发中使用，把样式表提取到一个外部的css文件中

在css文件中写法与内嵌样式表中大致相同，但不需要写style标签

使用<link rel="stylesheet" href="css/index.css" />调用css文件中的样式表

注释

css中的注释为/* 注释的内容 */

选择器

标签选择器

a{
    color: red;
}
p{
    color: lavenderblush;
}

类选择器

<style>
    .p1{
        color: blue;
    }
</style>
<body>
    <a href="" class="p1">cxk</a>
</body>

通配选择器

匹配所有的标签，优先级最低

*{
    font-size: 20px;
}

id选择器

<style>
    #aid{
        color: chocolate;
    }
</style>
<body>
    <a href="" id="aid">蔡徐坤</a>
</body>

选择器优先级

匹配标签越多，优先级越低，重叠选中标签时，使用优先级高的样式

但低优先级与高优先级没有重叠的样式，也会添加低优先级的样式

由高到低：行内样式表->id选择器->类选择器->标签选择器->通配选择器

后代选择器

对某个父标签的下级标签修饰

如列表

<style>
    .u1 li{
	}
</style>
<body>
    <ul class="u1">
        <li>列表项1</li>
		<li>列表项2</li>
		<li>列表项3</li>
		<li>列表项4</li>
	</ul>
</body>

文本

color：字体颜色

可使用十六进制颜色代码，如#ff7f50

也可使用颜色所表示的英文字母，如red

color: #ff7f50;

font-size：字体大小

需要在设置的大小后加上像素单位px，如20px

px：像素单位 css中尺寸需要添加单位

font-size: 20px;

font-family：字体

需使用字体库中拥有的字体，如font-family: 楷体;

text-align：文本对齐

text-align: center;

文字水平对齐

text-decoration:line-through

定义穿过文本下的一条线，即给文本添加删除线

text-decoration:underline

定义文本下的一条线，即添加下划线

text-decoration:none：定义标准的文本

font-style: italic;斜体文本

font-weight:字体粗细

font-weight: 700;

line-height:设置行高

line-height: 50px;

letter-spacing可以指定字符间距

letter-spacing: 20px;

text-indent用来设置首行缩进

text-indent: 2em;

em：当前文本中一个字符的大小

背景

background-color背景颜色

与为字体添加颜色相同

使用时 background-color: aquamarine;

background-image背景图片

background-image: url(img/bg.jpg);

background-repeat背景重复

background-repeat: no-repeat;

设置背景不重复

background-size背景尺寸

background-size:400px 500px;

先宽，后高

background- position 背景位置

background-position: right top;

背景图片位置，先设置水平，后垂直，上述代码表示背景在右上角

CSS列表

属性可以放置、改变列表项标志，或者将图像作为列表项标志。

list-style-image 将图象设置为列表项标志。

list-style-image: url();

list-style-position 设置列表中列表项标志的位置。

list-style-position: inside;

图标位置，在列表里(inside)还是列表外(outside)

list-style-type 设置列表项标志的类型。

list-style-type: none;

list-style 简写属性。

list-style: none url() inside;

CSS伪类

专门用来表示标签的一种的特殊的状态，当我们需要为处在这些特殊状态的标签设置样式时，就可以使用伪类。

伪类的语法：

:hover伪类表示鼠标移入的状态

a{
    color: cadetblue;
}
a:hover{/* 鼠标移进去显示 */
    color: crimson;
}

:active表示的是被点击的状态

a:active{
    color: coral;
}
/*一般给按钮设置 点击后显示*/

:focus向拥有键盘输入焦点的标签添加样式

/* 当拥有输入功能的标签 获得鼠标焦点时 自动切换到此样式表 */
input:focus{
	background-color: aqua;
}

透明

opacity:0-1

0完全透明，但图片还存在 1不透明

img{
	opacity: 0.5;
}

display: none;

使内容在网页上消失

块级标签

无论内容多少都会独占一行

可以设置宽高

主要用来进行网页布局

例如：p，h1...h6等标签

div标签

块级标签，没有任何附加样式，可以放置任何标签，设置什么样式就变成什么样式

div标签是一个纯净版的块级标签

行级标签

只占内容大小，不会占一行，设置宽高也无效

例如 a，b，s，i 等标签

主要用来对网页的文字进行修饰

span标签

一个纯净版的行级标签，对网页的文字进行选中，修饰

行级块标签

不占一行，又可以设置宽高。例如：img input

因此常用标签 div span a 表格表单列表

盒子模型

每一个标签都像一个盒子，网页布局其本质就是摆放盒子

每一个盒子又分成4个区域

内容区：放内容的区域

通过width和height两个属性可以设置内容区的大小，而不是整个盒子的大小。

内边距：内容区到边框的距离

使用padding属性来设置标签的内边距。

padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;


/* 四个方向都相同时  */
padding: 10px;

/* 上 右 下 左 */
padding: 5px 10px 15px 20px;
				
/* 先上下  后左右 */
padding: 10px 20px;

边框：标签的最外层

使用border属性来设置盒子的边框。

border-top-width: 2px; 
/*边框宽度*/

border-color: red;
/*边框颜色*/

border-top-style: solid;
/*边框样式dotted （点线） dashed （虚线） solid （实线） double （双线）groove （槽线）*/
				
/* border-top: 2px red solid; */
border: 2px red solid;
				
/* 圆角框 */
border-radius: 10px;
/*四个角*/

border-top-right-radius: 10px;
/*右上角*/

border-top-left-radius: 10px;
/*左上角*/