DAY_03 HTML小白学习笔记

最新推荐文章于 2024-07-23 16:18:27 发布

雨夜V星辰

最新推荐文章于 2024-07-23 16:18:27 发布

阅读量262

点赞数

文章标签： css

本文链接：https://blog.csdn.net/yuye_v_xingchen/article/details/70227348

版权

一、CSS引入方式

1.行类样式：

在html标签中添加属性，用CSS来写。

eg: <p style="color:#poo;">你好</p>

2.内嵌式：

<head>

	<title></title>

	<style type="text/css">

p{

		color:#AAA;

	</style>

</head>

3.外链式：(用的最多)

①创建.css文件

②在html文件中<head>中，添加

<link href="路径.css" type="text/css" rel="stylesheet">

③在.css文件中

p{

color:#AAA;

}

4.导入式：(会先加载html再加载css——基本不用)

在<head>中：

<style>

@imoort( url( demo.css) )

</style>

*注意：优先级采取就近原则(由上到下优先级依次递减)

二、CSS最常用选择器

使用“外链式”方式创建css与html文件：

1.标签选择器：

HTML： <p>你好</p> CSS: P{ //适用于所有已写的<p>标签

}

2.class(类)选择器：

HTML： <p class="cl">你好</p> CSS:.cl{ //可多个class同名(可共用)

}

3.ID选择器：

HTML： <p id="d1">你好</p> CSS: #d1{ //id不可同名(不可共用)

}

css中注释：/* */

~ ...后的所有同级元素... eg: .cl~p .cl后的所有同级元素p

空格 ...下面的...

, ...和...

+ 紧随...的...(同级元素)

> ...中的子元素...

4.属性选择器

*{ //页面中所有的标签

}

a[title]{ //设置了...title...属性的...a...标签

}

[href = ' http ' ]//以...http...开头

[href $ = ' doc ' ]//以...doc...结尾

[href * = ' ' ]//包含有......

三、CSS权重

CSS具有一定的继承性。(并不是所有的都有)

内联(A) > ID(B) > class/属性选择器(C)> 标签选择器(D) > 继承

权重可叠加(但权重高的一定要在前面) eg: BC 不可能出现CB的情况

css中字体属性：(字体相关属性都会被继承)

color: ;//颜色
font-size: ;//字体的大小(px)
font-family: ;//字体样式(eg:宋体、微软雅黑)
font-weight: 数字 ;//字体加粗

CSS中控制超链接：(lovehate爱恨原则)

L：a:link [ color: ; font-size: ; ]//开始时的状态

V：a:visited [] //点击之后的状态

H：a:hover [ ] //鼠标移动上去之后的状态

A：a:active [] //鼠标点击那一刻的状态

*注意：爱恨原则的先后顺序是固定的！顺序变化会导致无法加载出理想效果。

table{

width：

height:

border-collapse:collapse; //细线的合并(边框之间)

}

th , td{

border:solid 1px red; //solid:实线 dashed:虚线 dotted:点点

/** <=> border-style: ; //样式

* border-width: ; //宽度

* border-color: ; //颜色

*/

text-align:center; //水平居中

}

*注意：CSS由上至下执行(会出现覆盖现象)

四、CSS背景

background-image:url( 路径 );//背景图片

图片小于边框时，会横向铺满、纵向铺满。

background-repeat:repeat-x;//横向铺满

repeat-y;//纵向铺满

no-repeat;//只出现一次(默认在左上角)

background-position: 左边距上边距;//调整图片的显示位置

background-color:背景颜色;

background-attachment:fixed;//背景图固定，不随着滚动条的滑动而移动

综上可得：

background: blue url("1.png") no-repeat fixed 10px 20px;