JAVA学习之前端知识掌握Day002

发布于:2022-12-21 ⋅ 阅读:(257) ⋅ 点赞:(0)

CSS

什么是CSS

CSS的概念

Cascading Style Sheet 级联样式表

表现HTML或XHTML文件样式的计算机语言 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

CSS发展史

 

CSS的优势

内容与表现分离

网页的表现统一,容易修改

丰富的样式,使得页面布局更加灵活

减少网页的代码量,增加网页的浏览速度,节省网络带宽

运用独立于页面的CSS,有利于网页被搜索引擎收录

CSS基本语法

选择器 { 声明1;
 声明2;
 ……  }
    CSS的最后一条声明后的“;”可写可不写,但是,基于W3C标准规范考虑,建议最后一条声明的结束“;” 都要写上

style标签

    <style type="text/css">
h1 {
    font-size:12px;
    color:#F00;
}
</style>

HTML中引入CSS样式

行内样式

    使用style属性引入CSS样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
			行内样式:通过在标签内使用style属性来设置样式,样式的语法--》属性名:属性值;
				在style标签内可以写多个样式
				行内样式只针对当前所在的标签有效果
				
			行内样式的弊端:
				1)如果多个标签的样式是一样,那么样式代码需要重复写好几遍
				2)标签内样式与内容混在一块,不够简洁明了
		 -->
		<p style="color: red;font-size: 40px;text-decoration: underline;">这是一个段落标签</p>
		<p style="color: red;font-size: 40px;text-decoration: underline;">我也是一个段落标签</p>
	</body>
</html>

内部样式表

    CSS代码写在<head>的<style>标签中
        优点:方便在同页面中修改样式
        缺点:不利于在多页面间共享复用代码及维护,对内容与样式的分离也不够彻底

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 
				内部样式:在head标签内书写style标签,在style标签内写样式
					样式的语法规则:
						选择器{
							属性名:属性值;
							属性名:属性值;
							......
							属性名:属性值;
						}
						
					选择器:可以使用我们所学的标签名作为选择器,还有很多其它的选择器,比如id选择、class选择器、层次选择器、属性选择器、结构伪类选择器等选择器
			 
					使用标签作为选择器,样式就会作作用在当前页面中所有的选定标签上
			 
			 */
			
			
			/* 我们需要给p标签设置样式 */
			p{
				/* 设置样式--->属性名:属性值; */
				color: red;
				font-size: 40px;
			}
			
			h2{
				/* 
				设置颜色样式的时候,颜色属性值的主要有以下几种:
					1)直接写颜色的英文单词名称,比如red、green、blue
					2)十六进制表示颜色,使用#+6位或者3位十六进制数字表示,比如 #12ABCD  #00f
					3)RGB表示法,rgb(数字1,数字2,数字3)  这3个数字的范围都是0-255  比如 rgb(255,0,0)
					4)RGBA表示法,rgba(数字1,数字2,数字3,数字4),前面3个数字的范围是0-255,第4个数字的范围0-1,表示透明度,数字越小越透明  比如 rgba(0,0,255,0.3)
				 */
				color: rgba(0,0,255,0.01);
			}
		</style>
	</head>
	<body>
		<p>我是一个段落标签</p>
		<p>我也是一个段落标签</p>
		<h2>我是二级标题标签</h2>
	</body>
</html>

 外部样式表

   CSS代码保存在扩展名为.css的样式表中
    HTML文件引用扩展名为.css的样式表,有两种方式
        链接式
            <link href="style.css" rel="stylesheet" type="text/css" />

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/myStyle.css"> 
	</head>
	<body>
		<h2>山居秋暝</h2>
		<p>空山新雨后,天气晚来秋。</p>
		<p>明月松间照,清泉石上流。</p>
		<p>竹喧归浣女,莲动下渔舟。</p>
		<p>随意春芳歇,王孙自可留。</p>
	</body>
</html>

        导入式
            @import url("style.css");

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 
			 外部样式:
				将多个页面中相同的样式提取出来,写在一个后缀名为css的文件中
				然后HTML页面中只需要引入这个外部样式文件就可以实现样式的使用
				因为外部样式文件的两种方式
					方式一:@import url(样式文件的路径); --》此代码需要写在style标签内
					方式二:<link rel="stylesheet" href="样式文件的路径">  --》此代码直接写在head标签内
			 
			 */
			/* 引入外部样式文件 */
			@import url(css/myStyle.css);
		</style>
	</head>
	<body>
		<h2>赤壁</h2>
		<p>折戟沉沙铁未销,</p>
		<p>自将磨洗认前朝。</p>
		<p>东风不与周郎便,</p>
		<p>铜雀春深锁二乔。</p>
	</body>
</html>

      链接式与导入式的区别
            <link/>标签属于XHTML,@import是属于CSS2.1
            使用<link/>链接的CSS文件先加载到网页当中,再进行编译显示
            使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页当中
            @import是属于CSS2.1特有的,对不兼容CSS2.1的浏览器是无效的

CSS选择器

CSS基本选择器
    标签选择器
        HTML标签作为标签选择器的名称
            <h1>…<h6>、<p>、<img/>
        语法
            p { font-size:16px;}
    类选择器
        <标签名 class= "类名称">标签内容</标签名>
        .class { font-size:16px;}
    ID选择器
        #id { font-size:16px;}
    基本选择器的优先级
        ID选择器>类选择器>标签选择器
        标签选择器不遵循就近原则,无论是哪种方式引入CSS样式,一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级

CSS高级选择器

层次选择器

        后代选择器
            语法  body p{  background: red;  }
                后代选择器两个选择符之间必须要以空格隔开,中间不能有任何其他的符号插入
        子选择器
             body>p{  background: pink;  }
        相邻兄弟选择器
             .active+p {  background: green;  }
        通用兄弟选择器
            .active~p{  background: yellow;  }

 属性选择器

         E[attr]属性选择器
            a[id] { background: yellow; }
        E[attr=val]属性选择器
             a[id=first] { background: red; }
        E[attr*=val]属性选择器
            a[class*=links] { background: red; }
        E[attr^=val]属性选择器
            a[href^=http] { background: red; }
        E[attr$=val]属性选择器
            a[href$=png] { background: red; }

CSS美化网页元素

使用CSS设置字体样式和文本样式

<span>标签
    <span>标签 的作用
        能让某几个文字或者某个词语凸显出来

字体样式

 

           字体类型
            font-family属性
                p{font-family:Verdana,"楷体";}
        字体大小
            font-size属性
                单位
                    px(像素)
                    em、rem、cm、mm、pt、pc
        字体风格
            font-style属性
                normal、italic和oblique
        字体的粗细
            font-weight属性
                
        字体属性
            font属性
                字体属性的顺序:字体风格→字体粗细→字体大小→字体类型

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 通过标签选择器来给h2标签设置字体样式 */
			h2 {
				/* font-family:设置字体类型,可以设置英文字体,也可以设置中文字体,如果同时设置英文字体和中文字体,英文字体需要在前面 */
				/* font-family:"仿宋" ; */
				/* font-size:设置字体大小 */
				/* font-size: 50px; */
				/* font-style:设置字体风格,主要用来设置字体是否倾斜显示 */
				/* font-style: oblique; */
				/* font-weight:设置字体的粗细 */
				/* font-weight: 100; */
				/* 
				 上面设置字体样式是分开来写的,也可以合并写,使用font属性来写
				 font属性
					字体属性的顺序:字体风格→字体粗细→字体大小→字体类型
				 */
				font: oblique 100 50px "仿宋";
			}
		</style>
	</head>
	<body>
		<h2>我是一个二级标题标签</h2>
	</body>
</html>

文本样式

     

        文本颜色
            color属性
                RGB
                    十六进制方法表示颜色:前两位表示红色分量,中间两位表示绿色分量,最后两位表示蓝色分量
                    rgb(r,g,b) : 正整数的取值为0~255
            RGBA
                在RGB基础上增加了控制alpha透明度的参数,其中这个透明通道值为0~1
        排版文本段落
            水平对齐方式
                text-align属性
                    
            首行缩进
                text-indent:em或px
            行高
                line-height:px
        文本修饰和垂直对齐
            文本装饰
                text-decoration属性
                    
            垂直对齐方式
                vertical-align属性:middle、top、bottom

使用CSS设置超链接样式

    超链接伪类
        伪类样式
            标签名:伪类名{声明;}
        使用CSS设置超链接
            
        设置伪类的顺序:a:link->a:visited->a:hover->a:active

使用CSS设置列表样式

     列表样式
        list-style-type
            
        list-style
            li {
list-style:none;
}

使用CSS设置背景样式

    背景样式
        常见的背景样式
            背景颜色
                background-color
            背景图像
                background-image
        设置背景图像
            背景图像
                background-image属性
            背景重复方式
                background-repeat属性
                    repeat:沿水平和垂直两个方向平铺
                    no-repeat:不平铺,即只显示一次
                    repeat-x:只沿水平方向平铺
                    repeat-y:只沿垂直方向平铺
            背景定位
                background-position属性

本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到