9.5学习笔记

最新推荐文章于 2024-04-24 12:11:00 发布

墨染雨

最新推荐文章于 2024-04-24 12:11:00 发布

阅读量117

点赞数

分类专栏： WEB前端

本文链接：https://blog.csdn.net/qq_39857903/article/details/100897856

版权

WEB前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、 CSS的基本概念

（使用CSS让单调的HEML网页更富表现力：文档体积小，便于搜索，可读性好分层思想HTML+CSS 结构和表现分离，易于维护和管理）
CSS的基本概念：CSS是层叠样式表(Cascading Style Sheet) ,用于控制网页的外观。指颜色背景大小元素定位…
二、Css选择器

css选择器，也称为选择符，用于选择需要添加样式的元素
css的基本语法:
选择器{
属性:属性值; （样式规则：键值对）
…}

全局选择器通配符通用权重 0

全局选择器：设置所有标签使用同一样式，用表示
全局选择器语法:{}
html代码：

 <h1>我是标题红色</h1>
 <p>我是段落红色</p>

css代码：
*{ color:red;} ！结构和样式分离：分工明确，操作简单

组合选择器：

H1,h2,h3,h4,h5,p{
}
h.special,special,#one{
text-decoration:underline;//下划线
}

后代选择器：

段落1

后代元素

段落2

开心yuyang 快乐

************************************************************* 子元素选择器：

语法：
选择器1>选择器2>…{
//样式规则
}

lalal

不爱你

********************************************************** 嵌套选择器：

选择器1 选择器2{….}
P b{
Color:bule;
}

嵌套使用CSS标记的方法

嵌套之外的标记不生效 ******************************************************* 标签选择器元素选择器权重 1

标签选择器：用于声明标记采用的样式。
例如，p选择器用于声明所有p标签的样式，同样也可用h1选择器来声明页面中所有h1标签的样式。
标签选择器的语法：
E Selector{
{ property:value1;
property:value1;
样式规则
}
特点：选择的面比较广，不是最灵活。可以对多个标签同事进行组合声明 }
p{}直接给标签设置样式的就是标签选择器
html代码：

<h1>我是标题红色</h1>
<p>我是段落红色</p>
<p>我是段落红色</p>
<p>我是段落红色</p>

css代码：
p{ color:red;}
p,h1{color:red;}

类选择器样式名选择器权重 10

类选择器：class     用来为一系列标签定义相同的样式。
 例如：当声明了p标签为红色时，页面中的所		有p标签都显示为红色，如果希望其中的几个不是红		色，就需要使用类别选择器 。     
 类选择器的语法:  E.类名{样式规则}
在网页中书写css代码:

.red{ color:red;}
给h1标签和第三个p标签引入类别选择器red， html代码：

  <h1 class="red">我是标题红色</h1>
  <p>我是段落红色</p>
 <p>我是段落红色</p>
<p class="red">我是段落红色</p>

特点：一个元素可以使用多个类选择器，不同的规则可叠加，可穿两个样式，相同的功能看优先级：p.color范围比.color范围小，所以冲突使用p.color。比较灵活。

	<style type="text/css">
		.pcolor{
			color: chartreuse;
		}
		p.pcolor{
			color: blue;
		}
		.show{
			font-size: 40px;
		}
		 div.two{
			background-color: yellow;font-size: 25px;
		}
		div.one{
			background-color: greenyellow;font-size: 5px;
		}
	</style>
  <p>Y</p>
	<p class="pcolor show">Y</p>
	<p>Y</p>
	<h1 class="pcolor">Y</h1>
	<p>Y</p>
 <div class="two">块内容2</div>
	  <div class="one">块内容1</div>

ID选择器权重 100

行内样式权重 1000
ID选择器和类选择器类似，但要注意同一id名在同一个页面中只能出现一次。(具有唯一性)
ID选择器的语法: #id名{}
执行步骤
在网页中书写css代码：
【E】#con{ color:red;}
给h1标记添加id选择器con。

<h1 id="con">我是标题红色</h1>
<p>我是段落红色</p>
<p>我是段落红色</p>
<p>我是段落红色</p>

伪类选择器

a:link（未被访问过,访问之前的状态）
a:hover （鼠标滑过）  a:hover{text-	decoration: 	underline;};  鼠标放上去后有下划线       
a:active（鼠标按下）
a:visited(访问过后)    
 伪类选择器: 用伪类定义的样式并不是作用	在标记上，而是作用在标记的状态上。
 我们这里只要求掌握超链接的伪类a：hover。
伪类选择器的语法: 
a:hover{ }
 a:active{                                             a:visited{
		color:                                                    gray;
		
	                                                           }
		color: greenyellow;
		font-size: 100px;
	}
执行步骤
 html代码
 <a href="#">公司首页</a>
  <a href="#">公司新闻</a>
  <a href="#">产品展示</a>
    <a href="#">练习我们</a>
 css代码：
   a { color:red;}
   a:hover{ color:yellow;}

优先级：id>class>标签>全局

权重值：
Style 1000
Id 100
Class 10
标签（p）1
全局（*）0
(标签选择器的一种)派生选择器(包含选择器)：html div {} p a{}

三、在html中使用css的方法【CSS引用方式】

行内样式在标签后面写如：

                                <h1 style=”font-size:10px;color；blue”>我是一级标题</h1>

行内样式表的应用方法：在html标记内，每个标签都使用style属性定义css样式。
注：在标签内部设置（style）样式，键值对用冒号隔开
内联样式（行内样式）
特点：专人专用，不能共享【就近原则】
缺点：结构和表现没有做分离，页面的代码比较多，维护和管理麻烦
2. 内嵌样式（内部样式）在title下面写 <style></style>
3. 内嵌样式表的应用方法：将css添加到

<head>与

</head>之间，

并用<style></style>标记声明的一种样式。
语法如下：

<style>
/*这里写css内容*/
</style>

Eg【所有的h1/p等标签都遵循样式规则标签选择器：选中多有的h1标签】

<style type="text/css">
			h1{
				color: red;
				font-size: 20px;
				font-weight: bold;
				font-style: italic;/*斜体*/
			}
		</style>

内部样式：作用域小的优先级高，越具体的优先级越高所以当内联和内部样式都有的时候，内联样式优先级高（专人专用，内部
很多名字相同的都可以用）
特点：
1）内部样式写在<head></head>标签内，必须放在一个<style type="text/css"></style>标签内
2）在一个页面中结构和样式做了分离
3）内部样式可以给这份html文档的元素使用，不能对外共享

链接样式（外部样式）在title下写link

外部样式文件的扩展名必须是.css,强调此文件中只能放样式内容，不可以有标签之类的。
样式内容：h1{
color: red;
font-size: 20px;
font-weight: bold;
font-style: italic;/斜体/ }

链接样式表的应用方法：在外部定义css样式表，通过链接标记链接到页面中的一种样式。
（Href路径 rel样式 type类型）
语法：
外部样式【看搜狐网站】
特点：
一个外部样式可以给任意的html文档使用，一对多的关系，完全的分离
中大型网站使用频率高

导入样式 @import

导入样式的应用方法：采用导入样式的样式表，在HTML文件初始化时，会被导入到HTML文件内，作为文件的一部分，类似于内嵌样式表效果。
语法：

特点：同外部样式一样
优先级：越具体优先级越高实际要看先后顺序
行内样式>内嵌样式>链接样式
最好使用1-2种，避免“撞车”

一、文字属性
1 color字体颜色

 color属性：用于定义文字的颜色。常用的表示方式有:颜色名称或十六进制，其他表示方式不要求掌握。

1
2.font-size字号

font-size属性:设置文字的大小。属性值只要求数字加单位，可以是百分比，其他不需要掌握。常用的网页文字大小有12px(正文)、14px（标题）
执行步骤
html代码

我是段落标签,我变成了12像素的文字哦，网页常用的文字大小为12px和14px,要记得哦！

css代码：p{font-size:12px;} ************************************************************************* 3 .font-family字体： “黑体”“宋体”“微软雅黑” 首先执行第一个字体

font-family属性：设置字体，如宋体、黑体、隶书等。字体的表示方式只要求掌握字体名称，其他不要求掌握。
执行步骤
html代码

我是段落标签,我被设置成宋体,宋体是网页中常用的字体！

css代码： p{font-family:宋体; } ************************************************************************* 4.font-weight 字体加粗

bold、bolder、600-900加粗
normal普通字体100-500
font-weight属性设置文字的粗细程度，属性值只要求掌握bold和normal、其他不要求掌握。
bold 设置粗体
normal将粗体改为正常字体
执行步骤
给第一个h2标签和p标签分别添加类别选择器 normal、bold，html代码：

<h2 class="normal1">我是二级标题，我正常显示了 </h2>
<h2>我也是二级标题</h2>
<p class="bold1">我是段落标签,我被加粗了</p>
<p>我也是段落标签</p>

css代码：
body{ color:#FF0000;}

normal{ font-weight:normal;}
.bold{ font-weight:bold;}

font-style字体倾斜（倾斜方式： i em address font-style ）

italic倾斜
normal普通字体

二、段落属性
1…文字修饰（text-decoration）:p默认情况下是text-decoration：none；

underline下划线
overline 上划线
line-through删除线
none 无修饰
text-decoration属性是文本修饰属性。属性值有underline下划线、none 无修饰、overline 上划线、line-through删除线。常用属性值underline和none，即如何为文本设置下划线，如何为带有下划线的超链接文本去掉下划线，
如：p{text-decoration:underline;}
a{text-decoration:none;}

水平对齐方式（text-align）默认 left

text-align属性：设置文本的水平对齐方式。属性值可以设置为left、center、right等，即如何为文本设置左对齐、居中对齐和右对齐，其他值不要求掌握。
如：h2{ text-align:center;}

文本缩进（text-indent）假如设置一个比较大的负数，可以做出文字消失效果

text-indent属性：设置文本块中首行的缩进，属性值可设置为数值加单位或者用em设置缩进几个字，百分比和负值不要求掌握。-2em

如：p{text-indent:24px} 或 p{text-indent:2em;}

文本行高 (line-height) 如果line-height 和 height的值一样，则可以做出文字垂直居中效果

line-height属性：设置行间距，即行高。属性值可设置为数值加单位，百分比和负值，负值不要求掌握。
如：p{line-height:25px;}
代码：
p.show{
color:red;
font-family: sans-serif;
letter-spacing: 29px;/字母之间的间距/
word-spacing: 3px;
font-size: 30px;
border: 1px solid red;
line-height: 150px;
text-align: center;/对齐方式/
text-indent: 10px;/首行缩进/
text-transform: capitalize;/首字母/
text-shadow: 10px -10px 5px cornflowerblue;/文本阴影【第九单元】后面新增/
text-decoration: underline;

边框属性【块级标签】

#yy{
border-style: dashed;/*边框虚线实心 solid */
border-width: 2px;
border-color: blue;
height: 100px;
width: 100px;
border-top-style: solid;/*顶部边框样式
}
div.love{/圆角边框/
border: 1px solid red;
height: 100px;
width: 100px;
border-radius: 50px;/边框圆角半径 50 就是园了/
box-shadow: 10px 10px 2px red;/盒子的阴影/ box-shadow: 0px 0px 10px #000000;/黑色无偏移量/
}

 <p class="show"> hello,my name is yolanda</p>
	<div id="yy"></div>
	<div class="love">ai </p>

也可以对图片设置<img src=””> img样式规则{}
可以简写：
Border:2px solid red; boder-left:2px dashed bule;
Height:100px; boder-bottom:2px solid red;
Width:100px;

三、背景属性background

背景属性包含背景色，背景图，背景重复，背景位置，背景附件和背景复合属性等。
背景颜色background-color
背景图片background-image:url();
背景重复：background-repeat:
属性值：repeat/no-repeat/repeat-x/repeat-y
背景位置：background-position:水平  垂直; 
    怎么使背景图片居中？
  Background-position:center;         全选
Background-position:50% 50%;          
Background-position:50% center;       
Background-position:center 50%;       
可以取的值为关键字，数值，百分比  
水平：left  center right（或者数值）
垂直：top   center  bottom（或者数值）
				背景附件 （背景是否滚动 属性值：scroll（默认）滚动   fixed 固定）：
				background-attachment:fixed；   谷歌浏览器开启：chrome://flags/#overlayscrplbars Scollbars->Rnable
background复合属性在一个声明中设置所有的背景属性，如背景颜色、背景图像、背景重复及背景位置的设置，属性值的顺序可调换。
如：background: red  url(1.jpg) no-repeat right top;
body{
				/*border: 1px;  body也是容器
		    background-color: blue;
			background-image:url(../img/logo.jpg);
			background-repeat: no-repeat;
			background-position: 80% bottom;
			background-attachment:  scroll;
			*/
			background: red url(../img/logo.jpg) no-repeat 20px 20px scroll;

四、列表案例符号的样式 list-style
list-style-type 定义列表前面的项目符号
Disc(实心圆)、circle(空心圆)、 square（方块）、 none（不使用任何标号）。
list-style-image 定义列表项标志的图像【设置了图片上面的不好用了最好上个属性设置成none】
语法格式如下：list-style-image:none|url(url)
list-style-position 列表位置
语法格式如下：list-style-position:outside（默认）|inside（）在列表li的里面还是外面
去掉列表案例符号的代码是: ul{list-style:none;}

<style type="text/css">
		     ul{
		     	border: 1px solid red;
		     }
			ul li{
				border: 1px dashed black;
				/*list-style-type: decimal;   数字 变成了有序列表
				list-style-image: url(../img/logo1.jpg);
				list-style-position: outside; 设置在li的里面还是外面*/ 
				list-style: url(../img/logo1.jpg) inside;
			}
		</style>
<ul>
			<li>列表</li>
			<li>列表2</li>
			<li>列表3</li>
</ul>

墨染雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
9.5学习笔记

一、 CSS的基本概念（使用CSS让单调的HEML网页更富表现力：文档体积小，便于搜索，可读性好分层思想HTML+CSS 结构和表现分离，易于维护和管理）CSS的基本概念：CSS是层叠样式表(Cascading Style Sheet) ,用于控制网页的外观。指颜色背景大小元素定位…二、Css选择器css选择器，也称为选择符，用于选择需要添加样式的元素css的基本语法:选...
复制链接

扫一扫