本站消息

站长简介/公众号


站长简介:逗比程序员,理工宅男,前每日优鲜python全栈开发工程师,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-03(406)

2021-04(142)

2021-05(165)

2021-06(98)

2021-07(8)

CSS第二天

发布于2021-09-15 22:22     阅读(93)     评论(0)     点赞(4)     收藏(0)


1. Emmet 语法

Emmet 语法的前身时Zen coding,它使用缩写来提高html/css的编写速度。

1.1 快速生成HTML结构语法

1. 输入标签按tab键,如 输入div,然后按tab,生成<div></div>

2. 生成多个相同标签,加上 * 即可,如 div*3,生成3个div标签

3. 父子级关系的标签,可以用 > ,如 ul>li

4. 兄弟关系的标签,可以用 + ,如 div+p

5. 生成带有类名或id的,直接写 .demo 或 #demo 按tab即可

6. 想生成的div类名有顺序,可以用自增符号 $ ,如 .demo$5

7. 在生成标签内部写内容,用 {},如 div{内容}

1.2 快速生成CSS样式语法

1. 输入 w200 按tab,生成 width: 200px;

2. 输入 lh26 按tab,生成 line-height: 26px;

……


1. CSS的复合选择器

1.1 什么是复合选择器

在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。

1. 复合选择器更准确、高效的选择目标元素。

2. 复合选择器由多个基础选择器组合而成。

3. 常用复合选择器:后代选择器、子选择器、并集选择器、伪类选择器等。

1.2 后代选择器

后代选择器(包含选择器) 可以选择父元素里面的子元素。ol外层标签在前,li内层标签在后,中间空格隔开。

ol li {
	color: red;
}

1.3 子选择器

子元素选择器(子选择器) 只能选择作为某元素的最近一级子元素。元素1>元素2 {样式}

	<style>
		div>a {
			color: red;
		}
	</style>

<div>
  <a href="#">我是div儿子</a>
  <p>
  	<a href="#">我是div孙子</a><!--不能选中-->
  </p>
</div>

1.4 并集选择器

并集选择器可以选择多组标签,同时为它们定义相同样式。多个元素用逗号隔开。

div, p {
  color: red;
}

1.5 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第一个,第n个。

最大特点是用冒号 : 表示,如 :hover、:first-child。

伪类选择器很多,如 链接伪类、结构伪类等

1.6 链接伪类选择器

a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标位于其上的链接
a:active 选择活动链接(鼠标按下未松开时)
	<style>/*顺序不要乱*/
		a:link {/*没有访问过的链接*/
			color: red;
		}
		a:visited {/*访问过的链接*/
			color: orange;
		}
		a:hover {/*鼠标经过链接*/
			color:green;
		}
		a:active {/*鼠标按下时*/
			color: blueviolet;
		}
	</style>

<a href="#">链接伪类选择器</a>

1.7 :focus 伪类选择器

:focus 伪类选择器用于选取获得焦点表单元素。主要针对表单元素。

	<style>
		input:focus {
			background-color: pink;
			color: red;
		}
	</style>

<input type="text">
<input type="text">

 


2. CSS的元素显示模式

 2.1 什么是元素显示模式

元素显示模式就是元素以什么方式进行显示。HTML元素一般分为块元素行内元素两种类型。div占一行是块元素,一行可以多个span是行内元素。

2.2 块元素

常见的块元素有<h1> <p> <div> <ul> <ol> <li>等。典型块元素<div>

特点:独占一行;宽、高、内外边距 可控制;宽度默认100%;类似盒子,里面可以放行内/块级元素。

注意:文字类元素内不能使用块级元素,如<p>,<h1>~<h6>等

2.3 行内元素(内联元素)

常见的行内元素(内联元素)有<a> <strong> <b> <em> <i> <del> <span>等,典型行内元素<span>

特点:一行可显示多个;宽、高直接设置是无效的;宽度取决于内容;只能容纳文本或其他行内元素。

注意:链接不能再放链接;特殊情况<a>可以放块级元素,最好给<a>转换为块级模式。

2.4 行内块元素

<img /> <input /> <td> 它们具有块元素和行内元素的特点。

特点:一行可显示多个,但有空白空隙;宽度取决于内容;高,行高,内外边距可控制。

 

2.5 元素显示模式转换

特殊情况下,需要元素模式的转换,简单理解:一个模式的元素需要另外一种模式的特性,比如增加<a>的触发范围。

转换为块元素:display:block; 

转换为行内元素:display:inline;

转换为行内块元素:display:inline-block;

	<style>
		a {
			width: 100px;
			height: 50px;
			display: block;
		}
	</style>

	<a href="#">手机 电话卡</a>

 

练习案例:小米侧边栏

 

点击查看代码
	<style>
		a {
			display: block;
			width: 230px;
			height: 42px;
			background-color: #55585a;
			color: #fff;
			font-size: 14px;
			text-decoration: none;
			text-indent: 2em;
  			line-height: 42px;/*文字垂直 行高(line-height)等于盒子高度(height)*/
		}
		a:hover {
			background-color: #ff6700;
		}
	</style>

<a href="#">手机 电话卡</a>
<a href="#">手机 电话卡</a>
<a href="#">手机 电话卡</a>

 


3.CSS背景

3.1 背景颜色

background-color:transprent / color;

transparent:背景色透明

color:指定颜色

 




所属网站分类: 技术文章 > 博客

作者:天使的翅膀

链接:http://www.qianduanheidong.com/blog/article/192690/e2e451ea2d0097359fe8/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

4 0
收藏该文
已收藏

评论内容:(最多支持255个字符)