• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

Css语法

开发技术 开发技术 6小时前 4次浏览

Css语法

目录
  • Css语法
    • 一、Css引入的四种方式
    • 二、基础标签选择器
    • 三、组合标签选择器类型
    • 四、标签嵌套规则
    • 五、属性标签选择器
    • 六、伪类
    • 七、常用样式
      • 1. 颜色样式
      • 2. 字体样式
      • 3. 背景样式
      • 4. 文本样式
      • 5. 外边距和内边距(调整位置)
      • 6. 边框样式
      • 7. 列表样式
    • 八、常用属性
      • 1. display属性
      • 2. float属性
      • 3. clear属性
      • 4. position属性
      • 5. overflow属性
    • 九、常见问题
      • 1. 使用浮动元素后背景消失问题
      • 2. a标签背景图片不显示问题
      • 3. 设置自适应高度变化
      • 4. 小知识点的补充

一、Css引入的四种方式

  1. 行内式:在标签中加style属性,值为css代码,不同样式用” ; “号分隔
  2. 嵌入式:在head标签中,通过style标签来实现
<head>
	<style>
		p{
			background-color: red;
		}
	</style>
</head>
  1. 链接式:将css代码单独写在css文件中(推荐,边加载边渲染)
<link href="path" rel="stylesheet" type="text/css"/>
  1. 导入式(不推荐,先加载后渲染)
<head>
	<style>
		@import "path";
	</style>
</head>

二、基础标签选择器

下述几个选择器可以组合使用

  1. *: match all tags
  2. #id_name: match a tag of specific id_name(an id_name can be used only once)
  3. class_name: match all tags of specific class_name
  4. E: match all tags of specific tag_name

三、组合标签选择器类型

  1. 后代:用空格分隔具有层级关系的基础选择器,影响所有后代(E F)
  2. 子代:用大于号分隔具有层级关系的基础选择器,只影响子代(E>F)
  3. 并列:用逗号分隔所有基础选择器,影响所有被基础选择器选中的标签(E,F)
  4. 毗邻:用加号分隔所有基础选择器,只影响与左边紧挨的下边的标签(E+F)

四、标签嵌套规则

  1. 块级可以嵌套内联标签、块级标签,内联只能嵌套内联标签
  2. <p>标签不能包含块级标签
  3. <li>标签可以包含<div>标签
  4. 块级元素和块级元素并列,内联元素和内联元素并列

五、属性标签选择器

E(element)代表标签名,每个标签可以看作一个元素

  1. E[att]: 匹配所有具有att属性的元素
  2. E[att=val]: 匹配所有att属性值等于val的元素
  3. E[att~=val]: 即使att属性值中有多个以空格为分隔的值,只要有一个值为val就可
  4. E[att^=val]: 匹配att属性值中以指定值为开头的元素
  5. E[att$=val]: 匹配att属性值中以指定值为结尾的元素
  6. E[att^=val]: 匹配att属性值中以含有指定字符的元素

六、伪类

以下格式写在style标签内

  1. a:link{}:显示时的样式
  2. a:hover{}:悬浮时的样式
  3. a:active{}:点击时的样式
  4. a:visited{}:点击后的样式
  5. p:after{content: str; color: red}: 在p标签后插入内容,并控制样式
  6. p:before{content: str; color: red}: 在p标签前插入内容,并控制样式

七、常用样式

1. 颜色样式

<div style="color:red"></div>
<div style="color:#ffee33"></div>
<div style="color:rgb(255,0,0)"></div>
<div style="color:rgb(255,0,0,0.5)"></div>

2. 字体样式

<div style="font-size:45px"></div>
<div style="font-style:itallic"></div>
<div style="font-family:Times New Roman"></div>
<div style="font-weight:lighter"></div>

3. 背景样式

background-position:
left top(10px,10px);
top center bottom (transverse);
left center right (lengthways);

#div1{
	height:160px;
	width:200px;
	background-color:red;
	background-image:url(path);
	background-repeat:no-repeat;
	background-size:500px,500px;
	background-position:left center;
	background:url(path) no-repeat 100px 100px red;
}

4. 文本样式

p{
	text-align:center;
	line-height:100px;
	letter-spacing:5px;
	word-spacing:20px;
	text-transform:capitalize;
	text-decoration:none;
}

5. 外边距和内边距(调整位置)

当内嵌元素使用margin固定位置时,外部元素不能单单只有背景颜色,否则会无法识别边框范围,导致位置没有改变。
padding是通过扩充自身来实现位置定位的,自身大小会变。

  1. margin: 元素和元素间的距离
  2. padding:内容与边框之间的距离
  3. content:内容的大小

示例

-- 将body层的外边距设为0
body{
	margin:0 px;
	padding:0 px;
}

6. 边框样式

示例

p{
	border-style:solid;
	border-color:red;
	border-width:20px;
	border:solid green 3px;
	border:dashed green 3px;
}

7. 列表样式

示例

ul,ol{
	list-style: decimal-leading-zero;
	list-style: none;
	list-style: upper-alpha;
	list-style: disc;
	list-style: circle;
}

八、常用属性

1. display属性

p{
	display: inline;		/*Blcok tag is turned into inline tag*/
	display: block;			/*Hnline tag is turned into block tag*/
	display: none;			/*Hind the tag on the webpage*/
	display: inline-block;		/*Both the characters of block tag and inline tag*/
}

2. float属性

文档

  1. 正常文档流:按照从上到下,从左到右的顺序,来展示各元素标签
  2. 脱离文档流:将元素从正常文档流中取出,放在另一文档流中,两文档流重叠显示画面,相当于ps中的图层概念

功能

  1. 将标签元素从标准文档流中抽出,使之浮在标准文档流之上
  2. 标准文档流的文本内容,并不会被抽出的文档流的内容所覆盖,而是以环绕的方式布局在标准文档流周围(所以float被称为不完全脱离)

示例

p{
	float: left;
	float: right;
}

3. clear属性

如果左右两边有浮动元素,这个属性可以帮助我们实现换行

示例

p{
	clear: none;
	clear: left;
	clear: right;
	clear: both;
}

4. position属性

可以实现完全脱离正常文档流

示例

p{
	/*Follow the standard(normal) file_stream*/
	position: static;
	/*Follow the standard(normal) file_stream,but can modulate the position based on the previous position by these attribute or top,right,bottom and left*/
	position: relative;
	/*Detach the standard file_stream,and can designate a position that can't follow the changes of contents of the window.*/
	position: fixed;
	/*Detach the standard file_stream,and base on the position where the father's tag is located to shift*/
	position: absolute;
}

5. overflow属性

示例

overflow:hidden;
overflow:auto;
overflow:scroll;

九、常见问题

1. 使用浮动元素后背景消失问题

  1. 写一个空div标签,写在子元素后面
  2. 为该标签添加clear:both的样式
  3. 或者在父元素中添加overflow:hidden

2. a标签背景图片不显示问题

需要设置宽高才能看见图片

解决方案

.logo{
	background: url(path) no-repeat 0 0;
	height: 23px;
	width: 121px;
	float: left;
}

3. 设置自适应高度变化

important: 声明这个样式为主样式,不可被覆盖和修改

解决方案

div{
	overflow:hidden;
	minheight:700px;
	height:auto!important;
}

4. 小知识点的补充

概念补充

  • height represent the height of capacitor
  • line-height represent the height of row
  • font-size represent the height of fonts
  • the height of capacitor > the height of row > the height of fonts

other

p{
	opacity:0~1;
	border-radius:0~100%;
	
	/*Can change the relative position of text based on the position of image*/
	vertical-align:50px;
	vertical-align:top;
}

/*Designate the normal showing style and the hover showing style*/
a.active,a.active:hover{
	background-color:yellow;
}

程序员灯塔
转载请注明原文链接:Css语法
喜欢 (0)