前端基础css(三)
2024-09-05 22:46:50
HTML:用于显示页面的内容
CSS:用于以什么样的形式(样式)去显示
一、 选择器
【1】 标签/元素选择器 (整个页面的所有的相同的标签都显示统一的样式)
h1{ font-size: 20px; 字体大小 color: red; 字体颜色 font-family: "楷体"; 字体样式 }
【2】 类选择器 (统一的样子中,N多特殊的样式)
<style type=”text/css”> .blue{ color: blue; } </style> <h1 class="blue">寂寞沙州冷</h1>
【3】 id选择器( 样式唯 一)
<style type=”text/css”> #ticket{ font-size: 40px; color: green;
}
</style>
<h1 id="ticket">12306网站</h1>
【4】 * 页面中所有的标签
*{ margin: 0px; /**元素元素之间的空白(间距)*/ }
【5】 复合选择器 (页面上所有div,ul,p都去掉外间距(margin))
div,ul,p{ margin: 0px;}
【6】 子选择器 (直接的儿子及孙子。。。)
<div> <p>这一个div相当于一张透明的张</p> <p>这一个div相当于一张透明的张</p> <span> <p>span中的p</p> <p>span中的p</p> </span> </div> div p{ color: #000; font-size: 20px; }
【7】 子选择器 (直接的子元素)
div>p{ color: #000; font-size: 20px; }
二、样式
1、字体的样式
【1】 font-size: 字体大小 【2】 font-weight:字体粗细 【3】 color:字体的颜色 【4】 font-style:字体样式 倾斜 【5】 font :bold 12px/20px “黑体“;
2、块级元素常的样式
【1】 width:宽 【2】 height:高 【3】 background-color:背影色 【4】 border:1px solid red;
3、字体:
text-decoration: (none, underline(下划线),overline(上划线),line-through(删除线)) letter-spacing: 字与字之间的间距 line-height: 行与行之间的间距 font-size:字体大小 color:字体的颜色 font-weight:字体的粗细 注意事项:line-height与height值相同,文字/图片 垂直居中
4、文本:
text-align (left,center,right)文本的水平对齐方式
5、背景:
mso-char-indent-count:1.0">background-image: background-position:平移方式 background-repeat:平铺方式 (no-repeat,repeat, repeat-x,repeat-y)
6、定位:
【1】position (1) position: absolute; 绝对定位(浏览器的左上角) top:100px; left:300px; (2)相对定位 (相于原来的位置) position: relative; top:100px; left:200px; (3)固定定位 position:fixed; top:100px; left:10px; 【2】z-index z-index: 它的值大在上面,值小在下面 z-index: 30;
7、布局
[1]float: (left,right) [2]clear:both [3]display: block (行>块) /inline(块->行) a:hover{ background-color: #eee; color:#ff7300; width:100px; height:35px; line-height: 35px; display:block; /*visibility: hidden;*/ text-align: center;
}
[4]盒子模型
margin:元素与元素之间的间距
padding:边框与内容之间的间距
border:边框
三、样式的使用方式
【1】 内嵌样式 直接写在标签中<h2 style=”color:red;”></h2> 【2】 内联样式 <style>………</style> 【3】 外部样式 <link rel="stylesheet" type="text/css" href="css/css_01.css"/> <link rel="shortcut icon" type="image/x-icon" href="https://www.baidu.com/favicon.ico" />
优先级:内嵌>内联>外部
优先级: id选择器>类选择器>元素/标签选择器
属性选择器:
input[type=text]{ border:1px solid blue; width:300px; height:30px; }
text-decoration: (none, underline(下划线),overline(上划线),line-through(删除线))
letter-spacing: 字与字之间的间距
line-height: 行与行之间的间距
font-size:字体大小
color:字体的颜色
font-weight:字体的粗细
注意事项:line-height与height值相同,文字/图片 垂直居中
最新文章
- HTTP &; HTTPs
- Product of Array Except Self
- ggplo2学习笔记——基本图形类型
- js文件的装载和执行
- 前端相关技术之ajax相关
- SQL 表值函数
- ComboBoxEdit数据绑定
- IO模型总结
- ListView之SimpleAdapter
- java 多线程使用方法及Socket的使用
- jQuery相关知识
- 用Python处理实验数据
- OSChinaclient源代码学习(1)--Android与Server的交互
- HDU - 1172
- 慢查询日志分析(mysql)
- vue-router路由动态传参query和params的区别
- Nginx配置跨域支持功能
- 什么是UML?分哪两类?
- Mac mysql 解决中文乱码
- dba和运维专家们说有丰富的大型分布式系统架构设计经验纯属扯淡