第三周笔记-2

1、css:层叠样式

css写在style标签中,style标签一般写在head标签里面,title标签下面

 2、 CSS引入方式
内嵌式:CSS 写在style标签中
提示: style标签虽然可以写在页面任意位置,但是通常约定写在head标签中外联式: CSS写在一个外联式:CSS写在单独的.css文件中
·提示:需要通过link标签在网页中引入,在html中输入link后rel后的值是已经写好的,而href中加./后我们可以选择我们要用的文件。

行内式: CSS写在标签的style属性中
·提示:不推荐使用,之后会配合js使用

 3、选择器(在HTML中选择元素)

标签选择器(选择的是一类标签,不是单独一个,对这个标签内的所有内容都有效):

结构:标签名(css属性名;属性值)

选择的是一类标签,不是单独一个。

类选择器

结构:.类名{ css属性名:属性值;}
作用:通过类名,找到页面中所有带有这个类名的标签,设置样式

注意点:
1.所有标签上都有class属性,class属性的属性值称为类名(类似于名字)

2.类名可以由数字、字母、下划线、中划线组成,但不能以数字或者中划线开头

3.一个标签可以同时有多个类名,类名之间以空格隔开
4.类名可以重复,一个类选择器可以同时选中多个标签

id选择器(配合JS使用)

结构:#id属性值{ css属性名:属性值;}
作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式

注意点:
1.所有标签上都有id属性
2. 是不可重复的!

3.一个标签上只能有一个id属性值
4、一个id选择器只能选中一个标签
<title>Document</title>

<style>
<定义id选择器*/>

#blue {
color:skyblue;
}
</style>

< / head>
<body>
<div id(固定的值必须要写的)="blue">这个div文字是蓝色的</div>

</ body>
</html>

通配符选择器(开发中只会在及特殊情况下使用)

结构:*{ css属性名:属性值;}

作用:找到页面中所有的标签,设置样式注意点,可能会用于去除标签默认的margin和padding:
4、字体和文本样式

字体大小: font-size

   取值:数字+px

字体粗细: font-weight

   取值:关键字:正常normal 加粗bold;纯数字:正常400 加粗700

字体样式:font-style

   字体是否倾斜;正常(默认值)normal,倾斜:italic

字体类型:font-family

   直接在后面写什么字体就可以

字体类型:font属性连写

注意点:如果需要同时设置单独和连写形式
           要么把单独的样式写在连写的下面
           要么把单独的样式写在连写的里面

如果font后的一些属性省略的话,只能省略前两个

如果给一个标签设置了相同的样式,此时样式会重叠,写在最下面的会生效。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值