CSS学习笔记01

1.《html页面引入CSS》

------------------------------

外部引入:

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

注释:text/css ->文本/css,即css文本)。。REL属性用于定义连接的文件和HTML文档之间的关系只有 rel 属性的 "stylesheet" 值得到了所有浏览器的支持。其他值只得到了部分地支持。前面的两个一般是固定的。 href="css名.css"

内部嵌入:

在<head>标签内使用<style type="text/css"> css代码 </style>

 

行内嵌入:

在标签行内使用 style="css代码;css代码;"

 

2.《给html标签编写样式》

------------------------------

直接给html标签写样式.:标签选择器 eg:p{   }

 

四个基本样式:

width:宽度,控制html标签宽度

height:高度,控制html标签高度

color:文字颜色

background:背景颜色

单位:px    和  百分比

3.《id选择器与class选择器》

------------------------------

id选择器: <p id="info">段落</p>        #info{}

class选择器:<p class="item">段落</p>   .item{}

区别:注意:类名的第一个字符不能使用数字

            ②id选择器只能应用一个对象,而类选择器是可以应用到多个样式中的  ③当页面中用JavaScript或者要动态调用对象的时候,要用到id,所以要根据自己的情况运用

后代选择器

父代选择器1 子父代选择器2 子父代选择器3 ….子代选择器 {

}

选择器之间用空格间隔,以后用比较的多选择器优先级

注意:id选择器优先级最高,标签选择器优先级最低,如下所示:id选择器 > 类选择器 > 标签选择器

注意:选择器优先级不考虑选择器的先后顺序

 

 

4.《CSS控制文字显示》

------------------------------

font-size:文字大小   值:px

font-weight:文字加粗      值:normal(不加粗),bold(加粗)

font-style:文字样式(倾斜)  值:italic(倾斜),normal(不倾斜)

color:文字颜色 值:颜色

line-height:文字行高 值:px

5.《CSS控制超链接显示》

-------------------------------

a{} :默认样式

a:link {} 普通的、未被访问的链接

a:visited {} 用户已访问的链接

a:hover {} 鼠标指针位于链接的上方

a:active {} :链接被点击的时刻

注意:

a:hover 必须位于 a:link 和 a:visited 之后

a:active 必须位于 a:hover 之后  (l v h a)

 

text-decoration:  下划线  值:none(无下划线),underline(有下划线)

 

6.《CSS控制列表显示》

-------------------------------

list-style-type:none; 列表去掉小圆点

7 CSS控制(背景)图片显示

background-image:url(“”);  背景图片

background-color:

background-repeat: no-repeat(背景不循环),repeat-x,repeat-y

 

背景位置:left,center,right   在x轴

          Top,center ,bottom  在y轴  (先x后y)

合并写法:eg:

            background: orange  url(“xxx.jpg”)  no-repeat left center

               背景       颜色    图片             重复     先x  后y

8CSS盒子模型[margin padding border]

外边距:margin-top (right,left,bottom) (区域与区域之间的空隙)

        margin:

内边距:padding:(控制 标签 与 内部数据 之间的空隙)  (上 右 下 左)

       

边框:border: 1px    solid (dashed虚线)  blue;

      边框:  宽度   类型 (实线,虚线)  颜色;

      border-bottom(right,left,top):

  1. CSS进行页面布局[float]   [浮动布局和清理]

   float:left(right,both)

一个博客上https://www.cnblogs.com/ForEvErNoME/p/3383539.html

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框另一个浮动框的边框为止。

由于浮动框不在文档的普通流中,漂浮于普通流之上,像浮云一样,但是只能左右浮动。

 

 

 

猜你喜欢

转载自blog.csdn.net/qq_41043982/article/details/82713796