分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

CSS学习

发布时间:2023-09-06 01:12责任编辑:熊小新关键词:CSS

CSS

css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化。

存在方式有三种:元素内联、页面嵌入和外部引入,比较三种方式的优缺点。

语法:style = ‘key1:value1;key2:value2;‘

  • 在标签中使用 style=‘xx:xxx;‘
  • 在页面中嵌入 < style type="text/css"> </style > 块
  • 引入外部css文件

css写在head里面,style标签中写样式

ID用 #号来表示,class 可以用 .表示

在css里面注释用/*   xxxxxxxxxxxxxxxxx   */  表示

标签选择器

div{ } 
<div > </div>

class选择器

.bd{ ?} 
<div class=‘bd‘> </div>

id选择器

#idselect{ ?} 
<div id=‘idselect‘ > </div>

关联选择器 (可以层级选择)

#idselect p{ ?} 
<div id=‘idselect‘ > <p> </p> </div>

组合选择器

input,div,p{ ?}   #每个都可以应用

属性选择器

input[type=‘text‘]{ width:100px; height:200px; } 

<input type="text" name="user"/>

class 优先级或者重叠

 .c1{ ???????????background-color:red; ???????????height:60px; ???????} ???????.c2{ ???????????font-size:50px; ???????}一个div里可以有两个class样式 ?,两个不一样的时候会一起选用,如果有重叠的话会先用style ??class ?和div中的<div class="c1 c2">这里测试</div>

引入 css文件 可以适用于其它网页的属性

 <link rel="stylesheet" href="xxx.css"/>

常用 css属性

font-size:50px;border: 3px dotted red; 宽度为3px ?虚线 红色border: 3px solid red; ?实线height 48px; ?高度width ?80%; 宽度 ?可以用像素,也可以用百分比text-align ceter ?水平居中line-height ?上下居中font-weight 400 ?字体加粗

float用法,display用法

<div style="width:90px; height:30px; border: 1px solid red;float: left;"> 这里测试</div><div style="clear: both;"></div>将float清除<div style="display: block">测试</div> ?将div变成块级标签<div style="display: inline">测试</div> ?将div变成内联标签(行内标签),默认自己有多少占多少<div style="display: inline-block">测试</div> 两个属性都有<div style="display: none">测试</div> 让标签消失行内标签,无法设置高度宽度,块级标签能设置

 边距属性

padding: 20px; 内边距margin: 30px; 外边距margin: 0 auto; 可以将网页边上空余的去掉 ,auto 自动

CSS学习

原文地址:http://www.cnblogs.com/Mjonj/p/7554711.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved