CSS入门

CSS简介
css的主要使用场景就是美化网页 布局页面
CSS是层叠样式表(Cascading Style Sheets)的简称 CSS也是一种标记语言

CSS语法规范
CSS规则由两个主要的部分构成: 选择器以及一条或者多条声明
选择器 {属性:值; 属性:值;}

选择器是用于指定CSS样式的HTML标签,花括号内是对该对象设置的具体样式
属性和属性值之间以键值对的形式出现
属性是对指定对象设置的样式属性,例如字体的大小 字体的颜色
属性和属性值之间用英文的:分开 用;结尾

CSS代码风格
1.样式格式
紧凑格式
h3 {color: red; font-size:20px;}
展开格式
h3{
color: red;
font-size: 20px;
}
2.样式大小写
3.空格规范

CSS基础选择器

**1.CSS选择器的作用:选择器(选择符)就是根据不同需求把不同的标签选择出来。
2.选择器的分类**
	选择器分为基础选择器和复合选择器两大类
	基础选择器:是由单个选择器组成的
	复合选择器又包括:标签选择器、类选择器、id选择器和通配符选择器

1.标签选择器
标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
标签名{
属性1:属性值1;
属性2:属性值2;
}
是选择页面中某一类所有的标签选择出来更改样式。
2.类选择器
如果想要差异化选择不同的标签,单独选择一个或者多个标签 可以使用类选择器
.类名{
属性1:属性值1;
}

类选择器-多类名
我们可以给一个标签指定多个类名 从而达到更多的目的 这些类名都可以选出这个标签(一个标签有多个名字)
1.多类名的使用方式


在标签class属性中写多个类名
多个类名中间必须用空格分开
3.ID选择器
id选择器可以为标有特定id的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器,CSS中id选择器以#来定义
#id名 {
属性1:属性值1;
}
#nav {
color:red;
}
id选择器和类选择器的区别:类选择器可以被多次调用(多次使用) id选择器只能被调用一次

4.通配符选择器
在CSS中,通配符选择器使用*定义 他表示选取页面中所有元素(标签)
* {
属性1:属性值1;
}
通配符选择器不需要调用 自动就给所有元素使用

CSS字体属性
1.字体系列
css使用font-family属性定义文本的字体系列
p {font-family:“微软雅黑”}
div{font-family: Arial,“Microsoft Yahei”,“微软雅黑”;}

2.字体大小
CSS中使用font-size属性定义字体的大小
p {
   font-size: 20px;
}	
	px(像素)大小是我们网页的最常见单位
	谷歌浏览器默认的字体大小是16px
	不同的浏览器可能默认显示的字号大小不一致 
	可以给body指定整个页面的文字大小。

3.字体粗细
CSS使用font-weight属性来定义字体粗细

4.文字样式
CSS中使用 font-style属性设置文本的风格
p {
   font-style:normal;
}		 

属性值		作用
normal		默认值,浏览器会显示标准的字体样式font-style:normal;
italic		浏览器会显示斜体的字体样式。
让倾斜的字体不倾斜    <em><i>会让字体倾斜        
em {
      font-style:normal;
}

字体复合属性
字体复合属性可以把以上字体样式综合来写,这样可以更节约代码

CSS文本属性
1.对齐文本
text-align属性用于设置元素内文本内容的水平对齐方式 (left center right)默认左对齐left

div {
   text-align:center;
}

2.装饰文本
text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。
div {
     text-decoration:underline;
}
属性值		描述
none		默认,没有装饰线(最常用)
underline		下划线,链接a自带下划线(常用)
overline		上划线
line-through	删除线

3.文本缩进
text-indent属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。
div {
     text-indent:10px;
     text-indent:2em;              		em表示相对大小  当前元素一个文字的大小。  
}

4.行间距
line-height属性用于设置行间(行高),可以控制文字行与行之间的距离。
p {
    line-height:25px;
}

CSS的引入方式
按照CSS样式书写的位置(或者引入的方式),CSS样式表可以分为三大类:
1.内部样式表(嵌入式)
写在html页面内部,是将所有的CSS代码抽取出来,单独放在一个
通过这种方式 可以方便的控制整个页面中的元素样式设置。 代码结构清晰,但是并没有实现结构与样式完全分离。
2.行内样式表(行内式)
行内样式表(内联样式表)是在元素标签的内部的style属性中设定CSS样式 适合修改简单样式。
XXXX

style其实就是标签的属性
在双引号中间 写法要符合CSS规范
可以控制当前的标签设置样式
3.外部样式表(链接式)
实际开发中都是外部样式表 适合于样式比较多的情况 核心是:样式单独写到CSS文件中,之后把css文件引入到html页面中使用。
引入外部样式表分为两步
1.新建一个后缀为.css的文件 把所有的css代码放在此文件中
2.在html页面中 使用标签引入这个文件。

chrome调试工具
chrome浏览器提供了一个非常好用的调试工具,可以用来调试我们的HTML结构 和CSS 样式
1.打开调试工具
打开chrome浏览器 按下F12键 或者右键页面空白出–>检查
2.使用调试工具
Ctrl+滚轮可以放大或者缩小开发者工具代码大小
左边(上面)是HTML元素结构 右边(下面)是CSS样式
CSS样式可以改动数值(左右箭头或者直接输入)和查看颜色
Ctrl+0复原浏览器大小
如果点击元素 发现右侧没有样式引入 极有可能是类名或者样式引入错误
如果有样式 但是样式前面有黄色感叹号提示 则是样式属性书写错误。

Emmet语法
可以提高html/css的编写速度
1.快速生html结构语法
生成标签 直接输入标签名 按tab键 或者ent键
想要生成多个标签 加上就可以 div5 就可以快速生成五个div标签
有父子级关系的标签 可以用> 例如:ul>li 就可以
有兄弟关系的标签可以使用+ 例如 div+p
生成带有类名或者id名字的 直接写 .demo 或者 #two 按tab键就可以了
生成的div类名是由顺序的 可以用自增符号 $
如果想要生成标签里面写内容 可以用{}表示
2.快速生成CSS样式
3.shift+alt+F 快速格式化代码

CSS的复合选择器
复合选择器是由两个或者多个基础选择器,通过不同的方式组合而成的
常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等

1.后代选择器
	后代选择器又称为包含选择器  可以选择父元素里面子元素。其写法就是把外层标签写在前面 ,内层标签写在后面
          中间用空格分隔,当标签发生嵌套时,内层标签就成为外层标签的后代。

2.子选择器
	子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。	
	元素1 >元素2 {样式声明}
	上述语法表示选择元素1里面的所有直接后代元素(子元素)元素2

3.并集选择器
	并集选择器可以选择多组标签,同时为他们定义相同的样式。 通常用于集体声明。
	元素1,元素2{样式声明}      ,就是和的意思   把元素1和元素2 都改成一样的样式

4.伪类选择器
	伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第一个,第n个元素。
	伪类选择器 用冒号 :表示, 比如   :hover    :first-child
	伪类选择器很多  比如有链接伪类、 结构伪类、 

链接伪类选择器
	a:link		选择所有未被访问的链接
	a:visited		选择所有已被访问的链接		
	a:hover		选择鼠标指针位于其上的链接
	a:active		选择活动链接(鼠标按下未弹起的链接)
	链接伪类选择器注意事项
		1.为了确保生效  需要按照LVHA的循环顺序声明   :link    :visited   :hover   :active
		2.因为链接在浏览器中具有默认样式  所以我们实际工作中都需要给链接单独指定样式。
:focus伪类选择器
	:focus伪类选择器用于选取获得焦点的表单元素
	焦点就是光标,一般情况下<input>类表单元素才能获取,因此这个选择器也主要针对于表单元素来说
	input:focus {
	    background-color:yellow;
	}

=========================================================================================
CSS的元素显示模式
1.什么是元素显示模式
元素显示 模式就是元素(标签)以什么方式进行显示,比如div自己独占一行,比如一行可以放多个span。
HTML 元素一般分为块元素 和行内元素两种类型。
块元素有:

~

    1. 等 其中
      标签是最典型的块元素。
      块元素的特点:
      独占一行
      高度、宽度、外边距以及内边距都可以控制。
      宽度默认是容器(父级宽度)的100%
      是一个容器及盒子,里面可以放行内或者块级元素。
      注意:文字类的元素中不能使用块级元素。

      ~

行内元素
	常见的行内元素有:<a> <strong>  <b>  <em>  <i>  <del>  <s>  <ins>  <u>  <span>等。其中<span>是最典型的行内元素
           有的地方也将行内元素称为内联元素。
    行内元素的特点:
	相邻行内元素在一行上  一行可以显示多个
	宽 高直接设置是无效的。
	默认宽度就是它本身内容的宽度
	行内元素只能容纳文本或者其他行内元素。
注意:	链接里面不能再放链接
           	特殊情况链接<a>里面可以放块级元素,但是给<a>转换一下块级模式最安全。

行内块元素
	在行内元素中有几个特殊的标签----<img />  <input />  <td>,他们同时具有块元素和行内元素的特点。
	有些资料称它们为行内块元素。
       行内块元素的特点:
	和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙,一行可以显示多个(行内元素特点)
	默认宽度就是它本身内容的宽度(行内元素的特点)
	高度、行高、外边距以及内边距都可以控制(块级元素的特点)

元素显示模式转换
特殊情况下,我们需要元素模式的转换,简单的理解:一个模式的元素需要另一种模式的特性
比如想要增加链接的触发范围。
转换为块元素 display:block;
转换为行内元素 display:inline;
转换行内块元素 display:inline-block; display 转换的意思

让文字垂直居中 height = line-height 的像素值。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

新猿忆码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值