前端CSS基础

最新推荐文章于 2024-11-01 16:54:21 发布

~码中赤兔~

最新推荐文章于 2024-11-01 16:54:21 发布

阅读量60

点赞数 1

分类专栏： CSS基础文章标签： css html html5

本文链接：https://blog.csdn.net/m0_56557880/article/details/120442152

版权

CSS基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.css样式

行内样式

内部样式

外部样式

优先级：行内样式>内部样式>外部样式

行内样式：在标签内部添加style
<div style="color: red; background: yellow;">网络排行小说</div>
<aaa style="color: red; background: green;">网络排行小说</aaa>
div元素标签，color字体颜色，background底色，border边框


内部样式：在head中添加style
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		div{
			color: red;
			background: yellow;
		}
		aaa{
			color: red; 
			background: green;
		}
	</style>
</head>
<body>
	<div style="color: red; background: yellow;">网络排行小说</div>
	<aaa style="color: red; background: blue;">网络排行小说</aaa>
</body>
在head头部内添加标签style，将行内标签的内容添加，多属性换行，行内属性优先


外部样式
在css文件夹创建文件：cssdemo01.css，添加内容
div{
	color: red;
	background: yellow;
}
aaa{
	color: red; 
	background: green;
}
本文件导入
<head>
	<meta charset="UTF-8">
	<title></title>
	<style></style>
	<link rel="stylesheet" type="text/css" href="../css/cssdemo01.css" />
</head>
<body>
	<div>网络排行小说</div>
	<aaa>网络排行小说</aaa>
</body>

2.选择器

2.1基本选择器

标签选择器

类选择器

ID选择器

标签选择器
标签名{} 
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		div{
			color: blue;
		}
	</style>
</head>
<body>
	<h3><div>哈哈哈</div></h3>
	<div>abcdef</div>
	<div>abcdef</div>
	<div>abcdef</div>
</body>


类选择器
.类属性名
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		div.two{
			background: yellow;
		}
	</style>
</head>
<body>
	<h3><div>哈哈哈</div></h3>
	<div>abcdef</div>
	<div class="two">abcdef</div>
	<div>abcdef</div>
</body>
先在标签中定义类，然后.类名选择标签，添加属性


ID选择器（规范中id不重复）
#属性值
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		#one{
			border: 2px dashed red;
		}
	</style>
</head>
<body>
	<h3><div>哈哈哈</div></h3>
	<div>abcdef</div>
	<div class="two" id="one">abcdef</div>
	<div class="two">abcdef</div>
</body>
在标签中添加id，然后#选择


选择器优先级
ID选择器> 类选择器> 标签选择器

选择器优先级
ID选择器> 类选择器> 标签选择器

2.2高级选择器

2.2.1层次选择器

后代选择器（E F）
body p{
	background: yellow;
}
将body属性中的p标签，所有的，后代子标签也算，底色改变
<body>
	<p  class="active">1</p> 
</body>
<p>aaabbbccc</p> 
<!--浏览器自带解析功能，将body外的内容也可以解析到body内-->


子选择器（E>F）
body>p{
	background: yellow;
}
将body属性中的子标签中为p标签的改变底色，只改变一级子标签


相邻选择器
p.active+p{
	background: yellow;
}
将带属性的标签的下一个相邻标签选择，上面相邻的不选择，下一个标签名字要求是p，不是就不选择


通用兄弟选择器
p.active~p{
	background: yellow;
}
将带属性的标签的下面选择，p标签，下一个不是p则跳过

2.2.2结构伪类选择器

p:nth-of-type(2){

background: red;

}

将p标签中的第二个进行选则，ul列表中的p也会选

2.2.3属性选择器

a[title]{
	background: red;
}
查找a里的title

a[title="test website"]{
	background: red;
}
查找a里的title中为test website的标签

a[title*="k"]{
	background: red;
}
查找a里的title中有k的标签

a[href^="sites"]{
	background: red;
}
查找href中的sites开头的标签

a[href$="png"]{
	background: red;
}
查找href中的png结尾的标签

3.CSS常用

3.1文本常用标签

<span>凸显文本</span>
<span>哈哈哈</span>
<style type="text/css">
    span{
        background-color: red;
    }
</style>


font属性
风格 font-style:属性
粗细 font-weight:属性
大小 font-size:属性
类型 font-familly:属性 
font: italic 100 40px 楷体;


文本属性
颜色 color
color: #3367D6;
color: rgb(51, 103, 214);
color: rgba(0~255,0~255,0~255,0~1)前三个是红绿蓝取色，最后是透明度


段落 text-align
text-align: center; 居中
text-align: left; 左对齐
text-align: right; 右对齐


文本装饰 
text-decoration: overline; 上划线
text-decoration: line-through; 中划线
text-decoration: underline; 下划线
text-decoration: blink; 闪烁
text-decoration: none; 无（用于去掉一些自带的线，如超链接）


首行缩进
text-indent: 30px;


文本阴影 
text-shadow: 5px 5px 0px blue;
文本阴影，第一个是水平位移，第二个是垂直位移，第三个是模糊度，第四个是颜色，后两个可以省略


图片位置
<img src="img/girl.jpg" alt="girl" width="400px">
<span>
“斗之力，三段！”<br />
望着测验魔石碑上面闪亮得甚至有些刺眼的五个大字，少年面无表情，<br />
 </span>
img,p{
      vertical-align: middle;
}

图片独占一行，遇到换行就显示不了，p标签独占一行

3.2伪类超链接

a:hover{
    text-decoration: none;
    color: red;
}
<h4><a href="#">云韵</a></h4>
none，链接的标志下划线鼠标移上去就没了，颜色变成自定义的红色

3.3列表样式

ul li {
list-style: none;
}   
disc:默认值
circle:空心圆
square:实心方块
decimal:阿拉伯数字
lower-roman:小写罗马数字
upper-roman:大写罗马数字
lower-alpha:小写英文字母
upper-alpha:大写英文字母
none:不适用任何符号

3.4背景样式

<style type="text/css">
    .title{
        background: red url(img/arrow-down.gif) 205px 10px no-repeat;
    }
    #nav ul li{
        background: url(img/arrow-right.gif) 170px 2px no-repeat;
    }
</style>
第一个是底色，第二个是图片，第三个是向右偏移，第四个是向下偏移，最后是平铺