基础CSS使用内容

DAY4
1.CSS开始
标签<div>11111</div> （网站独占一整条）
<head> -- <style type=text/css>
</style>
(引入CSS样式的标签)
想让div有颜色的格式：div
{color:+颜色；background-color:green;width:200px;height:200px；}
正确格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div{color:blueviolet;background-color:green;
width:200xp;height:200xp}
</style>
</head>
<body>
<Div>wwwwwwwwwwwwwwwwwwww</Div>
</body>
</html>
2.浮动，漂浮float:none(原地不动浮动)
right(右边)
float:left(左边)
<style>
.q {
width: 1200px;
height: 28px;
background-color: red;

</style>

<body>
<div class="q"></div>
标签：DIV——无意义，使用最多，独占一行
类名：class 类名可重复
CSS常用属性：宽度 width
高度height
background-color背景颜色
float:（left)左浮动

3.外边距：margin(不用记）左边：left
right:右边
top:上面
bottom:底部 ,
(属性)
margin:0上下左右都是零
margin-left:21px左边外边距为21
margin:auto自动居中
margh-right:50px右边距是指两个同级模块之间的距离
注释：
<BODY>
<！-- 顶部开始 -->
<DIV CLASS="A">
</div>

快捷键 <DIV class="a">a1+a2>
颜色的表示方式：red,#ff0000,#f00,rgb(255.0.0)
边框的实线border-left:1px solid(实线)dashed(虚线)
文本属性：文字颜色color
字体大小font-size
文字水平居中text-align:center
文字垂直居中line-height:height 行高
强制不换行white-space:nowrap
超出裁切overflow:hidden
文本超出省略text-overflow:ellipsis
空格：文字前方使用 &nbsp
&nbsp

4.建网站首页标记要写index:html
注释一段（非一整行文字）alt+shift+a
整行注释：dtrl+/
标签类型：

<h1>-<h6>大到小标签，文字加粗独占一行，自动换行。特定的使用场景，H1在一个网页只能使用一次，h1-h3对搜索引擎友好，一般都用LOGO，H2可以使用三次，H3可以无限使用，<H7>本身是不纯在的，但是浏览器可以识别————HTMl可以扩展性。
<P>段落标签，普通段落文字，独占一整行。
单标签（空标签）<hr>水平线，独占一整行，主要会被边框取代。
单标签（空标签）<br>强制换行。
不推荐使用hr和br。
<div>普通无意义标签。
<b>加粗英文名bold
<strong>强调加粗，对搜索引擎友好，单个加粗。
<i>字体倾斜
<em>字体倾斜，不推荐使用i标签。
<u>下划线
<del>删除线，字体中间划线
<del><sup>-<sup>删除线<sub>+<sub><del>文字左右加减号
<span>用的最多的标签，普通无意义
<a href= “+网址">百度</a>标签跳转网页标签(href空出来为刷新标签)（img target="_blank“为新页面打开）
img
alt src title

a
href title target="_blank"

标签分为单标签和双标签
常用
h1-h6
p
div
hr (水平标签) ,br换行

https://tool.oschina.net/commons?type=2 转义字符（包含各种奇怪符号代码）

5.列表标签：<ol type="1">（order list英文简写，有序列表）
<li>哈哈哈哈哈哈哈哈</li>
<li>顶顶顶顶顶顶顶顶顶顶顶顶顶</li>
不需要打数字。

<ul>(无序标签，文字前方会出现圆点号)
<li></li>
<li></li>
<li></li>(list-style:none去掉列表前的点)

<dl>（STYLE dd类名不加点）
<dt>（主题）新闻列表</dt>
<dd>哈哈哈哈哈哈哈哈<dd>
<dd>(内容）点点滴滴f <dd>

<div>可以放任何标签
<P><ul><dl><h1><a href=""><img srt="" alt="">
<p>只能嵌套行内标签（span a img....)不能嵌套DIV
<h1-h6>可以嵌套任何标签，建议只嵌套文字或者行内标签
<ul> li li(可以嵌套任何标签)
ol li
dl dt/dd

span和所有的行内标签一样不能嵌套块级标签（独占一行），可以嵌套和自己一样同级别标签。

底线：
a标签不能嵌套自己
p标签不能嵌套块级标签

6.输入框<input type="text" placeholder="用户名">
（palaceholder可以自动消失的提示文字，valueh不会自动消失）
<input pyte="password">
(password密码框)

<br>性别：（实现单选必须指定name的值是一样的）
<input type=”radio“ name="sex">男
<input type=”radio“ name="sex">女
<input type=”radio“ name="sex">人妖

<br>爱好：（checkbox是多选方块）
<input tyoe="checkbox">吃饭
<input tyoe="checkbox">睡觉
<input tyoe="checkbox">打豆豆

<br>
(多行输入文本框)
<textarea name="" id="" cols="30" rows="10">
</textarea>
<input type="button" value="确定">
<input type="reset"(重置，清空）>
<input type="submit"（提交数据）>

8.游览器兼容问题以及支持属性值内容：

font-size:字体大小
网页默认字体大小16px
谷歌最小8px
0就不显示
color:
red
rgb(255.0.0)
#aa332f
em是px的两倍
font-family:字体
font-family:'宋体''黑体'备胎中文
font-weight:bold(加粗)/normal（不加粗）
font-style:italic(倾斜)/normal（不倾斜）
text-align:left/rjustify(左右对齐)
text-decoration:underline(下方有线)
text-decoration:overline(上方有线)
text-decoration:line-through(中间有线)
text-indent:2em(文字字体前端缩进两格文字，可以为负数)
letter-spacing:1x(字体左右间距可以为负数，字体负数可以反着写)
line-height:和高度相等垂直居中（可以不加单位，表示倍数）

简写：font:12px/24px"微软雅黑"
margin-top
margin-left
margin-right
margin-bottom
简写margin:10px10px10px10px(上右下左)

9.多个类名的使用：
.aa{
width:380px；
margin:auto
<标签名+class="a" aa>
<标签名+class="b" aa>
<标签名+class="c" aa>>
.a aa
.b aa
.c aa

posted @ 2020-08-15 10:16 狗狗老爹阅读(176) 评论(0) 收藏举报

刷新页面返回顶部

基础CSS使用内容

公告