简单标签
<标签 属性>内容</标签>
块元素 block：默认独占一行，支持宽高
div 没有任何样式
h1-h6 字体大小，加粗
p 外边距大
pre : 次要
hr
内联元素（行内元素）inline:默认不独占一行，不支持宽高
strong 加粗
em/i 斜体
a 超链接
段落标签
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
换行标签br
多个换行或空格都会只被解析成一个空格
pre：所见即所得
<pre>
阿道
夫睡得更好
发挥法
官和教
官好
</pre>
水平线
<hr>
字体加粗标签strong,斜体标签em
<strong>字体加粗</strong>
<em>斜体</em>
<i>斜体</i>
特殊符号
空格
> >
< <
© 版权符号，次要
图片标签img
src源：图片路径
绝对路径：从盘符开始算起的路径
E:\资料\代码\html_css_js\java2\20190402\img\zl.jpg
相对路径：相对当前文件的所在路径
..转向直接父级目录
次要：
alt : 图片因错误无法显示时的提示文字
title ：图片标题，悬停提示
超链接标签a
href ： 链接
target : 是否从当前页面跳转_self是默认值，表示从当前页面跳转，_blank在新网页打开链接地址
锚点：
<a href="#某个元素的id">gogogo</a>
可以跳转到该id对应元素的位置
超链接取消下划线：text-decoration:none;
列表
列表
ul 无序列表 重要
ol 有序列表
自带一些样式
一级子元素只能是li标签，li列表项
dl 自定义列表
父级元素
子级元素
嵌套规则：内联元素（行内元素）不能嵌套块元素，块元素随意
块元素block
内联元素（行内元素）inline
ul,ol,li块元素
<ul>
<li>
<h4>我的好友</h4>
<ul>
<li>张三1</li>
<li>张三2</li>
<li>张三3</li>
</ul>
</li>
<li>
<h4>我的坏友</h4>
<ul>
<li>张三1</li>
<li>张三2</li>
<li>张三3</li>
</ul>
</li>
</ul>
选择器和样式表
内部样式：整个页面的装修
<style>
基础选择器
1.标签选择器
div{
color:blue;
}
p{
color:blue;
}
2.类class选择器：优先级高于标签选择器
.fontred{
color:red;
}
3.id选择器：优先级高于类class选择器
#div{
color:green;
}
</style>
CSS样式表
行间样式 <div style="color:blue;">java2班全体同学</div> 最优先
内部样式 在head标签中写样式 优先级其次 练习用
外部样式 css文件 优先级最低 项目用
并集选择器
div,h1,.fontred,#a1{
color:red;
}
交集选择器
p.fontred{
color:red;
}
后代选择器
div p{
color:red;
}
div p .fontblue{
color:red;
}
属性选择器
[yzn=hao]{
color:blue;
}
span
span无意义标签，专门用来定义一些需要特定的内容的样式
<style>
span{
color: red;
}
</style>
</head>
<body>
<p><span id="" class="">东软睿道</span>是一家独具特色的......</p>
</body>
PS简单使用
快捷键
1.PrtSc截屏
2.在PS当中Ctrl+n新建画布
3.Ctrl+v粘贴截屏
4.Ctrl+是放大，Ctrl-是缩小
5.按住空格拖拽图片
6.利用吸管工具，提取颜色码
css导入
先建css文档然后将样式写入其中，再通过语句调用
链接式:先找css文件，在渲染html
<link rel="stylesheet" href="css/test_css.css">
导入式:先渲染html，在找css文件
<style>
@import url("css/test_css.css");
</style>
文字样式
字体大小 最小不能小于12px **重要**
font-size:22px ;
字体类型
font-family: "arial";
字体加粗 : bold(700) 重要
font-weight: bold;
字体风格:italic|oblique 斜体
font-style: normal;
文本样式
文本颜色
color:#fc3;
水平对齐 left right center
text-align: center;
首行缩进 1em = 1字符大小
text-indent: 2em;
font-size: 18px;
文本修饰 underline，none
text-decoration: underline;
文本高度
line-height: 30px;
垂直居中
img{
垂直对齐方式，居中对齐两侧的内容 */
vertical-align: middle;
}
伪类
伪类 -- 一些英文单词，代表了一种状态
hover 鼠标悬停
元素:伪类名{
}
a{
text-decoration: none;
}
a:hover{
color:red;
text-decoration: underline;
}
列表样式重置
ul{
list-style: none;
}
a{
text-decoration: none;
}
在双引号中写#号点链接不会刷新
<a href=""></a>
边框
边框 : 颜色 粗细 样式solid实线 dashed虚线
border:#fc3 1px dashed;
网友评论