CSS应用

最新推荐文章于 2023-07-17 15:08:38 发布

向心力QAQ

最新推荐文章于 2023-07-17 15:08:38 发布

阅读量465

点赞数

本文链接：https://blog.csdn.net/weixin_45127935/article/details/99198532

版权

CSS应用

CSS:Cascding Style Sheet 层叠样式表
1.作用:用来控制我们HTML标签的展示样式,使得标签的样式展示的更加丰富,就是用来解耦的
我们学习了CSS以后尽量不使用 HTML标签自带的属性全部用CSS 去设置
层叠性:多个多个样式控制一个标签,这几个样式对一个标签同时生效

2.CSS 跟HTML 配合使用的方式
方式1:内联样式: 将CSS 代码写在标签上所有的标签都会有一个 style属性
我们的CSS代码就可以写在 style 属性里面
每个CSS样式写法属性名:属性值;属性名2:属性值2;属性3:属性值3
举例:

<font style="color:#ff66ff;font-size:20px">这段文字的样式</font>

内联样式的写法:只能控制单个标签,且书写凌乱,不推荐使用.
2.内部方式:将style属性写在标签内部常用

3.外联样式:CSS样式写在一个单独文件中这种方式常用

相对位置

position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。
position：relative是相对定位，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。

类的选择器

<html>
 <head>
  <title> New Document </title>
  <style>
    .p1{ color:red }
  </style>
 </head>
 <body>
    <p>查看文字内容</p>
	 <p>查看文字内容</p>
	  <p   class="p1">查看文字内容</p>
	   <p>查看文字内容</p>
	    <p>查看文字内容</p>
 </body>
</html>

id选择器

<html>
 <head>
  <title> New Document </title>
  <style>
	#p2{ font-size:100px;}
  </style>
 </head>
 <body>
    <p   id="p2">查看文字内容</p>
	 <p>查看文字内容</p>
	  <p   class="p1">查看文字内容</p>
	   <p>查看文字内容</p>
	    <p>查看文字内容</p>
 </body>
</html>

标签选择器

<html>
 <head>
  <title> New Document </title>
  <style>
	p{color:red;}
  </style>
 </head>
 <body>
    <p>查看css的效果</p>
	<p>查看css的效果</p>
	<p>查看css的效果</p>
 </body>
</html>

包含选择器

<html>
 <head>
  <title> New Document </title>
  <style>
	ol  ul  li{font-size:50px; color:red}
  </style>
 </head>
 <body>
    <ol>
	<li>zhangsan
	<li>23
	<ul>
     <li>lisi
	 </ul> 
	</ol>
 </body>
</html>

通配选择器

•}

•选择所有标签
伪类

1.未连接     a:link
 2.已经访问链接  a:visited
 3.进入链接  a:hover
 4.激活（按下）状态  a:active
其中的hover 和active 可以用于其他控价
<html>
 <head>
  <title> New Document </title>
  <style>
    a:hover{font-size:50px;}
  </style>
 </head>
 <body>
    <a  href="#">我的链接</a>
 </body>
</html>

选择器的优先级

在页面中同一个html元素有不同的选择器定义样式的。

1、id选择器最高

2、类选择器

3、标记选择器
子选择器 div >p

div >p{

意思是 div 里面所有的子标签p 都被会选中注意对孙子标签是不起作用的

}

相邻选择器

div +p{

意思是选择跟我 div 同级的下一个挨着的p元素(单个的p 后面在跟p是选不中的) 如果在div 和p

之间隔着一个元素那是选不中的

}
相邻所有选择器•div ~p{

意思是选中 div 后面所有同级的p元素即使多个p 元素之间有隔着的其他元素也是能选中p元素
}
其他的一些工具标签设置
top:80px;//距顶部距离
left:35px;//距左距离
width:20px//宽度
height:20px//高度
font-family:楷体;
font-size:14pt;
color:blue; //层里面的字体颜色
overflow:scroll/visible/hidden/auto //超出内容是否包裹
float: right; //浮动到哪个位置设置left或right层为左右排列默认是上下排列
clear:both/left/right/none; //属性规定元素的哪一侧不允许其他浮动元素。一般用于使用float后无法换行，给两个控件中间夹一个空层设置style=“clear:both;”
background: #99FFcc;//层的背景颜色
background-image:url(‘top.jpg’);为层设置背景图片
display:block/none/inline //显示为块隐藏显示为行

visibility:visible//显示元素
visibility:hidden//隐藏元素

border:2px solid #f98510;//边框的宽度和样式以及颜色
z-index:2;// 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。Z-index 仅能在定位元素上奏效（例如 position:absolute;）
position:absolute(绝对)/relative(相对);//属性规定元素的定位类型。
transform:rotate(30deg);//旋转 scale(2,2);//缩放 translate(30px,20px);//位移
border-radius:20px;//边框圆角
border-image:url(border.png) 30 30 round;//边框图片大小模式
box-shadow: 10px 10px 5px #888888;//添加阴影
//轮廓
outline:#00ff00 dotted thick;
//鼠标显示相关
cursor:auto/crosshair/default/pointer/move/e-resize/ne-resize/nw-resize/n-resize/wait/text/help
cursor:url(’’),default;

向心力QAQ

关注

0
点赞
踩
1

收藏

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

CSS应用CSS:Cascding Style Sheet 层叠样式表1.作用:用来控制我们HTML标签的展示样式,使得标签的样式展示的更加丰富,就是用来解耦的我们学习了CSS以后尽量不使用 HTML标签自带的属性全部用CSS 去设置层叠性:多个多个样式控制一个标签,这几个样式对一个标签同时生效2.CSS 跟HTML 配合使用的方式方式1:内联样式: 将CSS 代码写在标签上所...
复制链接

扫一扫