前端学习笔记（二）CSS基础

最新推荐文章于 2024-05-20 23:40:52 发布

Spy97

最新推荐文章于 2024-05-20 23:40:52 发布

阅读量217

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/nudt_spy/article/details/105878428

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

同目录下创建文件myccs.css,在该文件下进行编写样式
在html的<head>标签中，添加引用
<link href="mycss.css" type="text/css" rel=stylesheet>

h1,h2,a,p{
	color: red;
	font-size: 100px;
	...
	...
}
body{
	color: blue;
}

注意：以最近的style为准

派生选择器

<li>红色</li>
绿色

li strong{  #中间用空格间隔
	color: red;
}
strong{
	color: green;
}

在这里插入图片描述

选择器

hellow

#pid {
	color: red;
}

增加派生选择器
hellow<a href="mycss.css">HELLOW</a> 

#pid a{
    color: red;
}

在这里插入图片描述

属性选择器

AAAAA
BBBBB

[title]{
    color: red;
}
[title=te]{
    color: blueviolet;
}

在这里插入图片描述

背景

在CSS文件中

body{
    background-color: blueviolet;   #背景颜色
    background-image: url("images/123.jpg"); #背景图片
    background-position: 100px 200px;	#图片放置位置
    background-repeat: no-repeat;  #图片是否重复
    background-attachment: fixed;  #图片是否固定
    background-size: 100px 200px;  #图片大小
}

文本

body{
    color: red;
    text-align: left;
    text-indent: 2px;
    text-transform: capitalize[lowercase][uppercase];#每个单词首字母大写 全部小写/大写
    text-shadow: 100px 100px 1px #00FF00; #文本阴影 距x 距y 阴影厚度 颜色
    width: 50px;		#自动换行
    text-wrap: normal;  #自动换行
}

字体

body{
    font-size: 20px;   		#大小
    font-family: 华文行楷;	#类型
    font-weight: bolder;	#加粗
    font-style: oblique;	#斜体
}

链接

a:link{							#未点击是颜色
    color: darkgrey;
    text-decoration: none;		#去掉链接的下划线
    background-color: chartreuse;#背景颜色
}
a:hover{						#鼠标放置到链接时的颜色
    color: yellow;
}
a:active{						#点击时的颜色
    color: greenyellow;
}
a:visited{						#点击后的颜色
    color: blue;
}

列表

ul li{
    list-style-type: lower-greek;    		#小写希腊字母序号
    list-style-image: url("images/123.jpg");#添加图片
    
}

表格

#qwe,tr,th,td{
    border: 2px solid #0000dd; 	#边框 粗细 实线 颜色
    text-align: center;			#居中
    background-color: bisque;	#背景颜色
}
#qwe{
    width: 400px;				#表格宽度
    height: 400px;				#表格高度
    border-collapse: collapse;	#合并边框
}

轮廓

p{
    outline-style: double;			#轮廓线性
    outline-color: #ff353a;			#轮廓颜色
    outline-width: 10px;			#轮廓粗细
}

定位

Spy97

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记（二）CSS基础

同目录下创建文件myccs.css,在该文件下进行编写样式在html的<head>标签中，添加引用<link href="mycss.css" type="text/css" rel=stylesheet>h1,h2,a,p{ color: red; font-size: 100px; ... ...}body{ color: blue;}注意：以...
复制链接

扫一扫