1.内联样式格式举例(注意= " " : ;)
<h2 style="color:red;margin-left:30px"><h2>
优势:简单有效 缺点:维护不方便
2.元素选择器举例
首先文档顶端创建<style></style> 格式:选择器{属性名称:属性值;}
<style>
h2{color: red;}
</style>
注意:一定要加上分号
3.字体大小属性名称:
h1 {
font-size: 30px;
}
4.字体样式属性名称
h2 {
font-family: Sans-serif;
}
5.使用谷歌字体
首要将代码放入编辑器的顶部引入想要的字体,例如想用Lobster字体
<img src="https://www.your-image-source.com/your-image.jpg">
<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
现在就可以将Lobster作为font-family属性的值了,效果为:
6.字体的自动降级
有几种默认字体是所有浏览器都可用的,比如Monospace/Serif/Sans-Serif,但是当某种字体不可用时,可以让浏览器自动降级到另一种字体。例如Helvetical字体不可用时,会自动降级使用Sans-Serif字体。
p {
font-family: Helvetica, Sans-Serif;
}
7.导入图片,自关闭,src指向具体地址
<img src="https://www.your-image-source.com/your-image.jpg">
8.边框
属性有:style、color、width、height 例如:
<style>
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>
9.图片变圆角border-radius:像素值/百分比50%;
10.a(锚点)元素,可以链接到外部地址,也可以链接到当前页面的某部分实现内部导航。有时候如果想添加一个a元素,但是还不确定链接到哪里,可以用固定链接:href="#";
11.图片alt属性(当图片无法加载时显示的替代文本) 搜索引擎也会搜索alt属性,每一张图片都应有一个alt属性
<img src="www.your-image-source.com/your-image.jpg" alt="this is a cat">
12.输入框占位符(预定义文本)(例如:"请输入账号")
<input type="text" placeholder="this is placeholder text">
13.表单action,构建可以和服务器交互的web表单form,action的值为表单提交到服务器的地址。
14.设置某一些项为必填项:required
<input type="texxt" required>
注:required属性在Safari浏览器中不起作用,推荐用Chrome浏览器学习
15.单选按钮radio button 只是输入框input的一种类型
每一个单选按钮都应该嵌套在它自己的label(标签)元素中,所有关联的单选那妞都应该使用相同的name属性
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
16.复选按钮CheckBox,也是input输入框的另一种类型,也都应嵌入到label元素中,关联的应有相同name属性
<label><input type="checkbox" name="personality"> Loving</label>
17.默认选中checked
<input type="radio" name="test-name" checked>
知识点:
1.背景颜色background-color
2.所有的HTML元素本质上是小的矩阵块,有三个影响布局的属性:margin padding border
padding外边距控制着元素内容和元素边框border之间的距离
margin内边距控制着元素边框border和元素实际所占空间的距离,如果设置为负值,元素将会变大。
3.字体颜色属性:color:red;
4.优先级:行内样式>id>class
5.最强大的覆盖css的方法:为了不让使用的css库覆盖掉自己的css,可以使用!important
color: pink !important;
这样就可以确保字体颜色为粉红色了,
6.0是十六进制中最小的一个,代码颜色的完全缺失,F是最大的一个,代表最大亮度。遵循红绿蓝即rgb格式
前两位表示红色的数量,三四表示绿色,五六表示蓝色的数量。
注:应用多个class到一个元素:用空格分开,顺序无所谓,但是style里的class顺序很重要,后面的优先权大。
<img class="class1 class2">