21、CSS页面美化

最新推荐文章于 2023-02-09 14:00:31 发布

ANDY___Q

最新推荐文章于 2023-02-09 14:00:31 发布

阅读量203

点赞数

本文链接：https://blog.csdn.net/ANDY___Q/article/details/108868959

版权

css概述：Cascading style sheet层叠样式表
 表现HTML或Xhtml文件样式的计算机语言
包括对字体、颜色、边距、高度、宽度、背景图片、网页、定位等设定

基本语法：
选择器｛声明1;声明2;...｝
例： h1｛font-size:12px;

	color:#f00;	｝ 属性：赋值
CSS最后一条声明后的；可写可不写，规范写



CSS引入样式，三种
 
行內样式： 使用style属性引入css样式
例：1、<h1 style="属性color：（赋值）red；"></h> 

 2、多属性赋值 <p style="（属性）color：（赋值）red；font-size:12px；"></p>  font-size字体大小

内部样式表
CSS代码写在<head>的<style>的样式中

<head>
	<style>
		p{ 
		font-size:18px；color：green；

		}
	</style>

</head>

外部样式表
CSS代码保存在扩展名
新建一个css文件，在里面设置style

例子：css中

a｛font-size：50px；font-family："微软雅黑"；color：#fff｝ font-family 字体类型

链接式：<link href="css文件" rel="stylesheet" type="css/text"/>
导入式：@import url（"css文件名" ) 写在style里面

优先级：行内样式表>内部样式表>外部样式表 就近原则。

CSS基本选择器（可以放在内部样式表，外部样式表中）
标签选择器
类选择器 .class（点类名）
ID选择器：例：#id｛font-size：18px｝
例：在内部样式中 <style>中 

	<style type="text/css">
	#name,#age,{font-size：18px;}

	</style>
<body>
	<p id="name">看我七十二变</p>

	<p id="age">18岁</p>
</body>

基本选择器的优先级:
行内样式表>ID选择器>类选择器>标签选择器  不遵循就近原则

CSS的高级选择器
层次选择器：
1、后代选择器：E F 例body p｛background：red;｝
2、子选择器: E>F  body > p{background：pink;}
3、相邻兄弟选择器 :E+F .ative+p{background：pink;}
4、通用选择兄弟选择器 E~F .active~p{background:yellow}


属性选择器 
[attribute^=value] a[src^="https"]  选择src属性值以“https”开头的每个元素<a>
[attribute$=value] a[src$="https"]  选择src属性值以“https”结尾的所有元素<a>
[attribute*=value] a[src*="https"]  选择src属性值中包含“http”子串的的每个元素<a>
CSS美化 网页元素
文字样式标签
<span style="color:red">重点突出文字</span> 作用对某些文字或者某个词凸显出来

p{font：italli 20px "宋体"}只能写在内部样式中，不能写在行内样式中

RGB：红色，绿色，蓝色
RGBA：红色，绿色，蓝色，透明通道 rgba（12，34，76，1）；透明通道取值范围是0-1

ANDY___Q

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
21、CSS页面美化

css概述：Cascading style sheet层叠样式表表现HTML或Xhtml文件样式的计算机语言包括对字体、颜色、边距、高度、宽度、背景图片、网页、定位等设定基本语法：选择器｛声明1;声明2;...｝例： h1｛font-size:12px; color:#f00; ｝属性：赋值CSS最后一条声明后的；可写可不写，规范写CSS引入样式，三种行內样式：使用style属性引入css样式例：1、<h1 style="属性color：（赋值）red；"&gt
复制链接

扫一扫