前端 CSS的学习

最新推荐文章于 2023-06-30 09:36:11 发布

WarriorsGo

最新推荐文章于 2023-06-30 09:36:11 发布

阅读量87

点赞数

分类专栏： java基础

本文链接：https://blog.csdn.net/WarriorsGo/article/details/99762572

版权

java基础专栏收录该内容

48 篇文章 0 订阅

订阅专栏

CSS的学习

1.css的基本语法

基本语法
<style type="text/css">
选择器{
       属性1:属性值；
       属性2：属性值
       。。。。。。
     }
</style>

2.选择器

1.类选择器
2.id选择器
3.标记选择器
4.包含选择器
5.伪类

3.类选择器

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

4.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>

5.标签选择器
<html>
 <head>
  <title> New Document </title>
  <style>
	p{color:red;}
  </style>
 </head>
 <body>
    <p>查看css的效果</p>
	<p>查看css的效果</p>
	<p>查看css的效果</p>
 </body>
</html>

6.包含选择器
<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>

7.通配符选择器 *

* {


}
选择所有标签

8.选择器的优先级

在页面中同一个html元素有不同的选择器定义样式的。
1、id选择器最高
2、类选择器
3、标记选择器

9.css的部分属性

div中css的部分属性（部分属性必须使用支持HTML5的浏览器）

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

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;

//不同浏览器不同写法
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */

WarriorsGo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端 CSS的学习

CSS的学习1.css的基本语法基本语法<style type="text/css">选择器{ 属性1:属性值；属性2：属性值。。。。。。 }</style>2.选择器1.类选择器2.id选择器3.标记选择器4.包含选择器5.伪类3.类选择器<html> <head&...
复制链接

扫一扫