CSS基础学习

最新推荐文章于 2021-12-23 11:12:37 发布

我是小哈呀

最新推荐文章于 2021-12-23 11:12:37 发布

阅读量291

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_37235798/article/details/82468364

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Css介绍：

层叠样式表(英文全称：Cascading Style Sheets)

Css基础语法：

CSS语法由两部分组成：选择符、声明。声明包括：属性和属性值

选择符 {属性: 属性值 ;属性:属性值}

CSS语法说明：

每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；

属性必须放在花括号中，属性与属性值用冒号连接。

每条声明用分号结束。

当一个属性有多个属性值的时候，属性值与属性值不分先后顺序。

在书写样式过程中，空格、换行等操作不影响属性显示。

例如：div{ width:200px;height:200px;background:red; }

样式的建立：内联样式内部样式外部样式：

内联样式(表行间样式，行内样式，嵌入式样式）

语法：<标签 style=“属性：属性值;属性:属性值;”></标签>

例如：<div style="width:100px;"></div>

内部样式表（嵌套到页面中）

语法

css语句

</style>

注：使用style标记创建样式时，最好将该标记写在<head></head>;

外部样式 2种方式
1. 1. 1. 外部样式表的创建
    2. 外部样式表的导入

语法：

说明：

使用link元素导入外部样式表时，需将该元素写在文档头部，即<head>与</head>之间。

rel：用于定义文档关联，表示关联样式表；

type：定义文档类型；

样式表的优先级：

内联样式表的优先级别最高

内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高

Css选择符（选择器）

选择符的定义

选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素.

常用的选择符有十种左右类型选择符，id选择符，class选择符，通配符，群组选择符，包含选择符，伪类选择符，伪对象选择符。

元素选择符/类型选择符（element选择器)

语法：元素名称{属性：属性值；}

类型选择符是根据html语言中的标记来直接定义

说明：

a)元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符。例如body、div、p,img,strong,span......等。

b)所有的页面元素都可以作为选择符; 用法：如果想改变某个元素得默认样式时，可以使用类型选择符；

用法：

（1）如果想改变某个元素的默认样式时，可以使用类型选择符；（如：改变一个p段落样式）

（2）当统一文档某个元素的显示效果时，可以使用类型选择符；（如：改变文档所有p段落样式）

id选择器

语法：#id名{属性：属性值;}

说明：

1、当我们使用id选择符时，应该为每个元素定义一个id属性；如：<div id="top"></div>

2、id选择符的语法格式是“#”加上自定义的id名；如：#box{width:300px; height:300px;}

3、起名时要取英文名，不能用关键字：(所有的标记和属性都是关键字)

4、一个id名称只能对应文档中一个具体的元素对象，因为id只能定义页面中某一个唯一的元素对象。

5、最大的用处：创建网页的外围结构

class选择器

语法：.class名{属性：属性值;}

说明：

当我们使用类选择符时，应先为每个元素定义一个类名称，

类选择符的语法格式是："如：<div class="top"></div>"

用法：class选择符更适合定义一类样式；

伪类选择器

a:link {color: red;} /* 未访问的链接状态 */

a:visited {color: green;} /* 已访问的链接状态 */

a:hover {color: blue;} /* 鼠标滑过链接状态 */

a:active {color: yellow;} /* 鼠标按下去时的状态 */

说明：

1）当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为： a，a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效；

2）为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；例如：a{color:red;} a:hover{color:green;} 表示超链接的三种状态都相同，只有鼠标划过变化颜色。

群组选择器

语法：选择符1，选择符2，选择符3......{属性：属性值;}

说明：当有多个选择符应用相同的样式时，可以将选择符用“，”分隔的方式，合并为一组。

实例：.top, #nav, p{width:100px;}

包含选择器

语法：选择符1(父) 选择符2（子）{属性：属性值;}

说明：选择符1和选择符2用空格隔开，含义就是选择符1中包含的所有选择符2;

实例： div ul li{height:200px;}

通配符

语法：*{属性：属性值；}

说明：通配选择符的写法是“*”，其含义就是所有元素。

用法：常用来重置样式。

选择符的权重

css中用四位数字表示权重，权重的表达方式如：0，0，0，0

类型选择符的权重为0001 a p div span form .... 1

class选择符的权重为0010 .class 10

id选择符的权重为0100 # 100

子选择符的权重为0000

属性选择符的权重为0010

伪类选择符的权重为0010

伪元素选择符的权重为0010

包含选择符的权重：为包含选择符的权重之和

内联样式的权重为1000

继承样式的权重为0000

注：如果权重相同时，则执行后写的样式；

当不同选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖低权重选择符的样式。

例如：b .demo的权重是1+10=11 .demo的权重是10

所以经常会发生.demo的样式失效

*相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式。

（注意：是css样式中定义该选择符的先后，而不是html中使用先后）

HTML与CSS的注释：

html的注释

css的注释 /*-----------------注释内容--------------------*/

css属性组成和作用：

属性：属性值。

每个css样式必须由两部分组成：选择符（selector）和声明（Decleration）注：声明又包括属性（Properyt）和属性值（Value）
Css属性：属性是指定选择符具有的属性，是css 的核心，css共有150多个属性；
Css属性值：属性值包括法定属性值和常规的数据加单位。Div{width：400px}

文本字体属性：

文本大小：{font-size:12px/14px/16px;}

说明：

属性值为数值型时，保修给属性值加单位，属性值为0时除外。
单位还可以是1em，默认情况下：1em=16px，0.75em=12px；
为了减小系统间的字体显示差异，IE Netscape Mozilla的浏览器制作商于1999年召开会议，共同确定16px/ppi为标准字数大小默认值，即1em

补充：

PPI是像素分辨率的单位，数据ppi值越高，画面的细节就越风戽，因为单位面积的像素数量更多。PPI也叫图像的采样率（在图像中，没英寸所包含的像素数目）。

Px是像素单位，em是相对单位

文本颜色：

{color:颜色值;}

1、用十六进制表示颜色值： 16进制颜色代码指定颜色的组成方式：前两位表示红色，中间两位表示绿色，最后两位表示蓝色。把三个数值依次并列起来，以#开头 0 1 2 3 4 5 6 7 8 9 A B C D E F 颜色模式：光色模式 FF 00 00（红绿蓝）;

写法：#faf7fc；

2、RGB 例如：color:#F00;

3、 color:rgba(0,255,255,0.6 ) 透明度

字体加粗：

{ font-weight:bolder/bold/normal/100-900 ;}

说明：

bolder(更粗的)/bold（加粗）/normal（常规）

在css规范中把字体的粗细分为9个等级，分别从100-900，其中100对应最轻的字体变形，而900对应最重的字体变形。 100-500常规字体 600-900加粗字体

字体倾斜：

{ font-style：italic/oblique/normal;}

说明：

取值为：italic/oblique/normal italic和oblique都表示倾斜，不过oblique的幅度要大一点。但一般浏览器对它们的区分不是很明显。

检查或设置对象中的文本的大小写：

{text-transform:none/capitalize/uppercase/lowercase}

说明：

text-transform这个属性有3个值分别为；

text-transform: uppercase 把文字变成全大写

text-transform: lowercase 把文字变成全小写

text-transform: capitalize 变成首字母大写

文本对齐方式：

水平对齐方式{text-align:left/right/center;}

垂直对齐方式{vertical-align:top/bottom/middle;}

文本行高：

{line-height:normal/数值;}

说明：

当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐；

当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上任意位置的定位；

当单行文本的行高大于容器高时，可实现单行文本在容器中垂直中齐以下任意位置的定位。（IE6及以下版本存在浏览器兼容问题）

文本装饰：

text-decoration:none/underline/overline/line-through/blink

说明：

none:没有修饰

underline:添加下划线

overline:添加上划线

line-through:添加删除线

blink：闪烁

首行缩进：

首行缩进：{text-indent:value;}

说明：

text-indent可以取负值； text-indent属性只对第一行起作用

字间距：

{letter-spacing:value;}

说明：控制英文字母或汉字的字距

词间距：

word-spacing:value;

说明：控制英文单词词距

垂直对齐方式：

{vertical-align:top/bottom/middle;}

说明：当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐； line-height=height

图文排列中常用；此属性无法单独使用，需要支持的条件

扩展：如何让一个图片垂直居中的几个条件

1、必须给容器加一个text-align:center;

2、必须给当前元素转成行内快级元素（display:table-cell）在给当前元素加上vertical-align:middle;

Css列表属性：

A、定义列表符号样式：

{list-style-type： }

说明：取值： disc(实心圆) circle(空心圆) square(实心方块) none(去掉列表符号)；

B、使用图片作为列表符号：

{list-style-image:url(图像路径)； }

说明：url(所使用图片的路径及全称)

C、定义列表符号的位置

{list-style-position: ；}

说明：取值： outside(外边) inside(里边)；

D、简写方法：

{list-style: ； }

说明：可简写直接设置列表属性值；常用属性： list-style:none;去掉列表样式；

Css边框属性：

语法：{border: ； }

说明：

属性1：边框样式 border-style:solid/dashed/dotted/double solid:实线，dashed:虚线，dotted:点状线，double:双线，none/0(去掉边框)

属性2: 边框厚度 bosrder-width：取值；

属性3：边框颜色 border-color:取值；

单独设置某个方向的边框属性：

border-top：上边框

border-bottom:下边框

border-left:左边框

border-right:右边框

例如： border-top-style:取值； border-top-width：取值； border-top-color:取值；

Css背景图设置：

背景颜色：

语法：选择符{background-color:颜色值;} 简写：background:color值;

背景图片设置：

语法：background-image:url(背景图片的路径及全称)；

说明：

网页上有两种图片形式：插入图片、背景图；插入图片：属于网页内容，也就是结构。

背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等。

背景图片的显示原则

1）容器尺寸等于图片尺寸，背景图片正好显示在容器中;

2）容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；

3）容器尺寸小于图片尺寸，只显示元素范围以内的背景图。

4）加载背景图必须有容器区域；

背景图片平铺：

语法：选择符 {background-repeat:no-repeat/repeat/ repeat-x/repeat-y }

no-repeat:不平铺

repeat：平铺 (默认)

repeat-x：横向平铺

背景图片的位置：

语法：选择符{background-position：水平方向属性值垂直方向属性性;}

水平方向值：left/center/right或数值

垂直方向值： top/center/bottom或数值

说明：

水平向右垂直向下移动是正数值

水平向左垂直向上移动是负数值

两个值：第一个值表示水平位置的值，第二个值表示垂直的位置。 *例如：当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置。

各属性的缩写：

语法：选择符{background：属性值1 属性值2 属性值3;}

背景缩写： {background:#00ff00 url（背景图片的路径及全称） no-repeat center top；}

常用的图片格式（压缩图片）

1)jpg:有损压缩格式，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )

2）gif：有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像;

3)png:有损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是fireworks的源文件格式，适用于颜色数量较少的图像;

Css浮动属性

float:定义网页中其它文本如何环绕该元素显示

有三个取值：

left:元素活动浮动在文本左面

right:元素浮动在右面

none:默认值，不浮动。

浮动产生负作用

1、背景不能显示

由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。

2、边框不能撑开

如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示

由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

clear：清除浮动

none：允许两边都可以有浮动对象

both：清除两边浮动

left：清除左边浮动

right:清除右边浮动

注：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动框是脱离了普通的文档流

清除浮动的几种方法

1、clear:both清除浮动

2、父级添加overflow:hidden;缺点：父级这个盒子不能放其他元素

3、万能清楚浮动

.clearfix:after{

conten:"";

display:block;

height:0;

clear:both;

}

.clearfix{

zoom:1;

}

zoom:1;属性是IE浏览器的专有属性，Firefox等其它浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。

我是小哈呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础学习

Css介绍：层叠样式表(英文全称：Cascading Style Sheets)Css基础语法： CSS语法由两部分组成：选择符、声明。声明包括：属性和属性值选择符 {属性: 属性值 ;属性:属性值}CSS语法说明：每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；属性必须放在花括号中，属性与属性值用冒号连接。每条声明用分号...
复制链接

扫一扫