Css语法

Css语法

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

一、Css引入的四种方式

  1. 行内式：在标签中加style属性，值为css代码，不同样式用" ; "号分隔
  2. 嵌入式：在head标签中，通过style标签来实现
  1. 链接式：将css代码单独写在css文件中（推荐，边加载边渲染）
  1. 导入式（不推荐，先加载后渲染）

二、基础标签选择器

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

  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. 标签不能包含块级标签

  4. 标签可以包含
    标签
  5. 块级元素和块级元素并列，内联元素和内联元素并列

五、属性标签选择器

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. 颜色样式

2. 字体样式

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;
}

8. 鼠标样式

示例

p{
	cursor: pointer;
	cursor: path;
}

八、常用属性

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. css的注释方法

/* content */

5. css清除浮动

/*method one: Add to the current tag*/
p{
	clear:both;
}
/*method two: Add to the parent_tag*/
p{
	overflow:hiden;
}
/*method three: Add to the parent_tag*/
.clearfix :after{
	content:".";
	display:block;
	clear:both;
	visibility:hidden;
	height:0;
}

6. 为其他标签设置悬浮样式

.container .item:hover .text{
	color:yellow;
}

7. a标签嵌套img标签后溢出现象

  • 可通过固定a标签的高度来解决

8. 小知识点的补充

概念补充

  • 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;
	
	margin:0 auto;
}

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

/* The value of z-index is biger, then the priority of the layer is higher, which mean that it can cover the layers of lower priority  */
p{
	z-index:100;
}
python学习

相关

python学习（十）函数 内容

selenium python学习笔记之八 窗口截图、验证码处理

python学习随笔day15

【python学习笔记】openpyxl操作excel高阶操作

Python学习之PIL库的使用

Python学习笔记-----类和对象知识点2)---类的继承

Python学习笔记-----类和对象知识点2)---类的继承

【Python学习笔记六】获取百度搜索结果以及百度返回“百度安全验证”问题解决

【Python学习笔记七】从配置文件中读取参数

【Python学习】 把list, tuple中的元素用write()方法写入文件

python学习day37笔记

python学习day35笔记

标签