0
点赞
收藏
分享

微信扫一扫

CSS笔记一 CSS语法和基本选择器

吴wuwu 2022-03-11 阅读 58

文章目录

前言

一、CSS是什么?

二、引入CSS样式

1.行内样式

2.内嵌样式

 3.链接样式(外链式)

 4.使用导入样式

三、CSS语法规则

四、CSS选择器

总结



前言

  网页有三个层:
  html   用来搭建网页基本骨架    结构层
  css    用来修饰网页            表现层
  javascript    脚本            行为层

前面学完了html的一些基本标签,现在来看css,能够更方便快捷的构建渲染好看的网页界面


一、CSS是什么?

CSS  (层叠样式表)(Cascading Style Sheets),描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素,CSS 节省了大量工作。它可以同时控制多张网页的布局


二、引入CSS样式

1.行内样式

代码如下(示例):

		<p style="color:black;"></p>

2.内嵌样式

代码如下(示例):

<style type="text/css">
		p{
			font-size: 24px;
            width: 200px;
			color: pink;
		}
		
	</style>

 

 3.链接样式(外链式)

代码如下(示例):

<link rel="stylesheet" type="text/css" href="css/01.css"/>

 

 4.使用导入样式

代码如下(示例):


@import url(“css文件”);
@import “.css文件”;

5.优先级

 


三、CSS语法规则

 

 

四、CSS选择器


    1.标签选择器

hr {
				border: 0px;
				border-bottom: 1px solid #89c5e8;
			}

 2.id选择器
      

	#content {
				color: mediumpurple;
				font-size: 24px;
				font-family: "arial black";
			}

   3.类(class)选择器
  


			.num1 {
				font-size: 24px;
				color: pink;
			}

 4.包含选择器(后代选择器)
      

p a{
			font-size: 24px;
            width: 200px;
			color: pink;
		}

  5.优先级(权重)
      



五、CSS注释

<style type="text/css">
	/* 	p {
			font-size: 24px;
            width: 200px;
			color: pink;
		} */
		
	</style>

六、长度单位


七、颜色表达     RGB颜色

1.直接使用颜色英文单词    不推荐

(有点浏览器不兼容)

2.使用三色的数值,如rgb(120,222,100)

例:red rgb(255,0,0)    

       blue  rgb(0,0,255) 
       black rgb(0,0,0)
       green  rgb(0,255,0)

      white  rgb(255,255,255)

 3.使用三色数值的十六进制,如#0000ff
     

例: rgb   red #ff0000   #f00  

      blue   #0000ff  #00f

      black #000000  #000
     green   #00ff00  #0f0  

     white #ffffff  #fff
        




      

  

总结

以上就是今天的内容,简单介绍了CSS的基本语法和选择器的使用,还有一些零碎的使用方法,下一篇具体讲解字体文本样式

举报

相关推荐

0 条评论