CSS

最新推荐文章于 2022-11-16 11:43:29 发布

向51致敬

最新推荐文章于 2022-11-16 11:43:29 发布

阅读量262

点赞数

分类专栏：前端 CSS

本文链接：https://blog.csdn.net/pan_by/article/details/101862359

版权

前端同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

CSS是层叠样式表（Cascading Style Sheets）的缩写，它用于定义HTML元素的显示形式，是一种格式化网页内容的技术.

使用CSS可以提高页面浏览速度
CSS和div元素结合更好的控制页面布局
实现表现和结构、内容相分离。将网页的表现形式部分剥离出来放在一个独立样式文件中，可以减少未来网页无效的可能

样式规则
CSS样式由样式规则组成，所有的样式规则的语法遵循如下相同的基本格式：
选择器 { 属性1: 值1; 属性2: 值2; … 属性N: 值N; }
一条样式规则由一个选择器和一个或者多个声明组成；
选择器指定规则可作用于HTML文档中哪个或者哪些元素；
声明要用大括号（{}）括起来。每个声明要用分号（;）结束。
一个属性/值对组成一个声明，属性和值之间用冒号（:）分隔；
如果属性值中包含了空格，那么该值就必须用双引号（""）括起来。例如：font-family: “Times New Roman”;
我们还可以指定多个**选择器使用相同的样式定义，选择器之间用逗号分隔开。**例如，如果我们想要把所有标题列标记（从1到6）的文本字体颜色都定义为红色，可以使用如下定义：
h1, h2, h3, h4, h5, h6 { color: red; }

样式规则的位置

外部样式表
不需要style标签
<link rel=“stylesheet” href=“” />

嵌入式样式表
<style type=“text/css”>
p{}
</style>

内联样式
属性名为style
举例:<p style=“”></p>

创建样式规则
每个样式规则分为选择器和规则本身两个部分，选择器用于规则所应用的元素，规则本身则指定格式。
选择器：
元素选择器
类选择器
ID选择器
属性选择器
包含选择器
通配选择器
伪类及伪元素选择器

选择器:
id 选择器 语法 #id{}
class 类选择器 .class{}
tag 标签选择器 标签{ }    （元素选择器）

组合选择器 :
p,span{} p 和 span 都有 同样的 样式
后代选择器
div span {} div 的后代 span 都有的格式   （包含选择器）
子代选择器
div > span {} div 的子代 span 才有样式

*通配符 选择器 所有的元素 都有这个样式

伪类
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
伪类的语法：
selector : pseudo-class {property: value}
CSS 类也可与伪类搭配使用。
selector.class : pseudo-class {property: value}
a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}  	/* 选定的链接 */

伪对象
:before 或 :after 选择器在被选元素的内容前面插入内容。
使用 content 属性来指定要插入的内容
例子：

<style type=“text/css”>
          p:before {content:"台词 ：";}
</style>
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>

属性单位
长度单位
绝对长度值包括cm、mm、in、pt、pc等，绝对长度值最好用于打印输出设备，而在仅仅作为屏幕显示用时，绝对长度值并无多大意义。
相对长度值包括px、em、ex等。相对长度是指元素尺寸相对于浏览器的系统默认值来相应的缩放。
颜色单位
用百分比值来表示，如color:rgb(50%,0,50%) ；
使用0-255之间的整数值来设置，如color:rgb(128,0,128) ；
使用十六进制数组定义颜色，如#fc0eab；
使用简化的十六进制数定义颜色**，如#080；**
为颜色取名：aqua,black,blue,fuchsia,gray,green等。
url单位
URL单位的具体格式是：在“url”后面紧跟一个括号，括号中是url的地址。如果在地址中使用了括号、逗号、空格、单引号和双引号，那么就必须在整个地址的外面加上一对单引号或者双引号。地址可以是相对地址或绝对地址。
例如**：p{ background-image : url(“img/logo.gif”) ; }**

文本属性
在这里插入图片描述

背景属性
在这里插入图片描述

定位属性
position: relative | absolute | static | fixed
static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。
relative 不脱离文档流，参考自身静态位置,通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。
absolute 脱离文档流，通过 top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
fixed 固定定位，这里他所固定的对象是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
CSS中定位的层叠分级：z-index: auto | number ;
auto 遵从其父对象的定位number 无单位的整数值。可为负数。z-index使用整数表示元素的前后位置，数值越大，就会显示在相对靠前的位置，并且CSS同意在z-index中使用负数

相对定位
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
在这里插入图片描述
注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框

绝对定位
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
在这里插入图片描述
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

布局属性
在这里插入图片描述
Display:为None时，其他元素可以占据该元素的位置。
Visibility: 为hidden时，其他元素不能占据该元素的位置。

列表属性
在这里插入图片描述

列表属性
	<style>    	
    	ul{    		
    		list-style-type:none;
    		list-style-image: url(../img/xj.png);
    		
    	}   	
    </style>	
	<body>		
	  <ul>
	  	   <li>java</li>
	  	   <li>python</li>
	  	   <li>oracle</li>
	  	   <li>javascript</li>
	  </ul>			
	</body

CSS盒子模型（box model）
在这里插入图片描述

CSS中!important的使用
当有多个相同的选择器时给了 !important 选择的就是该样式

<style type="text/css">
.testClass{ 
color:blue !important;
}
</style>
<body>
    <div class="testClass" style="color:red;">
        测试Css中的Important
    </div>
</body>

CSS中的继承
CSS中，有一些样式是可以继承的，如字体、文本属性。有一些样式是不能继承的，如边框、间距、布局、定位等。

向51致敬

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS

CSS是层叠样式表（Cascading Style Sheets）的缩写，它用于定义HTML元素的显示形式，是一种格式化网页内容的技术.使用CSS可以提高页面浏览速度CSS和div元素结合更好的控制页面布局实现表现和结构、内容相分离。将网页的表现形式部分剥离出来放在一个独立样式文件中，可以减少未来网页无效的可能样式规则CSS样式由样式规则组成，所有的样式规则的语法遵循如下相同的基本格式：...
复制链接

扫一扫

专栏目录