前端web学习html5+css+js笔记3

CSS学习

css写法

<!--//第一种写法，直接写在html里面-->内部样式表

<title>初学CSS</title>

<style>

p{//选择器CSS属性

color:aqua;文字颜色

font-size:10px;字号

}

</style>

<p>体验CSS</p>

外部样式表：开发使用

css代码单独写在CSS文件中（.css）

在html中，用link标签引用

<link rel="stylesheet" href="">rel中的stylesheet是样式表，href里的是地址

行内标签：配合js使用

<div style="color:antiquewhite;font-size:20px;">这是div标签</div>

选择器

标签选择器：使用标签名作为选择器

类选择器：定义类选择器.类名->使用类选择器：标签添加class=“类名”

<title>类选择器</title>

<style>

.red{

color:aqua;文字颜色

}

.size{

font-size:10px;字号

}

</style>

<p class="red">体验CSS</p>

<p class="red size">体验CSS</p>

id选择器（一般配合js使用）

定义id选择器 #id名

使用id选择器  标签名添加id=“id名”

<style>

#red{

color:aqua;文字颜色

}

</style>

<div id="red">这是div标签</div>

同一个id选择器在一个页面中只能使用一次

通配符选择器：*不需要调用，浏览器自动查找页面所有标签，设置相同的格式

<style>

*{

color:aqua;

}

</style>使用场景：开发初期解决初始化

画盒子

属性名：width 宽度  height高度  background-color 背景色

<style>

.red{

width:100px;

height:100px;

background-color:brown;

}

</style>

<div class="red">div1</div>

字体修饰属性

font-size 文字大小（默认16px） font-weight文字粗细（数字：400/700(开发使用)正常normal/加粗bold）

font-style文字倾斜  作用：清楚浏览器默认的倾斜效果（正常normal/倾斜itaLic）

line-heignt行高（第一种写法：数字+px；第二种写法：数字（当前font-size的倍数））

font-family：楷体；字体族  网页开发建议使用无衬字体族（sans-serif）

font复合属性 使用场景：设置网页公共字体样式

font-itaLic,700,10px/2,楷体；是否倾斜、是否加粗、字号、行高、字体族（必须按顺序写，必须写字号和字体，否则不生效）

text-indent 文本缩进 属性值（1.数字+px  2.数字+em（1em=当前标签的字号大小））

text-align文本对齐 属性值（left:左对齐（默认）center(居中对齐) right（右对齐））

color 颜色 属性值

  text-decoration 修饰线  属性值（none无 underline下划线  line-through删除线 overline上划线）