网页样式CSS

最新推荐文章于 2024-06-17 09:00:23 发布

圆仔哟

最新推荐文章于 2024-06-17 09:00:23 发布

阅读量101

点赞数

分类专栏： JavaWEB 文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_53699240/article/details/120159839

版权

JavaWEB 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS的概念

1.Cascading Style Sheet 级联样式表

2.表现HTML或XHTML文件样式的计算机语言

包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定。

CSS的作用

1.能控制页面的样式和布局

2.网页文件与样式文件相分离，提高开发效率

块元素

1.独占一行

2.可以定义宽度和高度

常用块元素

div ， p ， ul ， li

内联元素

1.一行排列显示

2. 不能定义宽度和高度

常用内联元素

span，a ，label

<div>和<span>标签

最大优点

没有任何的默认样式渲染

最大区别

<div>标签是块元素

<span>标签是内联元素

标签的嵌套规则

1.块级标签可以嵌套行内标签的，行内标签不可以套块标签

2.<p>标签不要套快属性标签，可以套a、span

3.嵌套的时候注意代码缩进

作用

1.结构化HTML元素

2.DIV+CSS网页布局

3.提高网页加载速度

注意：

<div>和 <span> 标签可以相互转换（ display 属性）

规范角度而言， <span> 标签中不内嵌 <div>标签

CSS语法

<style>标签

<html>
    <head>
        <style type="text/css">
            h1{
                font-size: 12px;
                color: #F00;
            }
        </style>
    </head>
    <body>
        ...
    </body>
</html>

注意：

1、应写在<head>标签之间；

2、加上 type="text/css" 属性

CSS选择器

<!--语法-->
选择器{
        声明1;
        声明2;
        ......
}

注意：

1.CSS的最后一条声明后的“ ;” 可写可不写，建议都要写上；

2.CSS 的多条声明可写在同一行，但开发时便于阅读建议分行写并缩进；

标签选择器

HTML标签作为标签选择器的名 称：<h1>…<h6>、 <p> 、 <img/>

注意：标签选择器直接应用于 HTML 标签

p{
    font-size: 16px;
}

类选择器

<标签名 class= "class（类名称）">标签内容</标签名>

注意：网页中可给不同标签相同的class

.class{
    font-size: 16px;
}

ID选择器

<标签名 id= "id（id名称）">标签内容</标签名>

注意：网页中标签的ID不能重复,唯一存在

#id{
    font-size: 16px;
}

超链接伪类

/*未访问的链接*/
a:link{
    color: red;
}
/*已访问的链接*/
a:visited{
    color: blue;
}
/*当鼠标悬停在链接上*/
a:hover{
    color: green;
}
/*被选择的链接*/
a:active{
    color: yellow;
}

注意：

1、在 CSS 定义中， a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的

2、在 CSS 定义中， a:active 必须被置于 a:hover 之后，才是有效的

3、记忆方法： l o v e ha te

CSS复合选择器

并集选择器

注意：

1.多个选择器之间可以是多个不同或相同类型；

2.多个选择器之间必须用英文半角输入法逗号“ , ”隔开；

p,#id,.class{
    font-size: 14px;
    color: green;
}

交集选择器

注意：

1.格式为：标签 + 类选择器

或

标签+ID选择器

2.选择器之间不能有空格

h3.second{
    font-size: 14px;
    color: green;
}

后代选择器

注意：

1.选择器之间可以是多个不同或相同类型并有层级关系的；

2.选择器之间用空格隔开；

p a{
    font-size: 14px;
    color : green;
}

CSS引入方式

行内样式

使用 style 属性引入 CSS 样式

<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>

内部样式表

style标签中书写 CSS代码

…
<head>
    <style type="text/css">
        h3{
            color: red;
        }
    </style>
</head>
…

外部样式表

1.CSS代码保存在扩展名为.css的样式表中

2.HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式

链接式

<link type="text/css" rel="styleSheet" href="CSS文件路径 " />

导入式

<style type ="text/css">
    @import url("css文件路径");
</style>

链接式与导入式的区别

<link/>

1.属于XHTML

2.优先加载CSS文件到页面

@import

1.属于CSS 2.1

2.先加载HTML结构再加载CSS文件

CSS中的优先级

行内样式 > 内部样式表 > 外部样式表

ID选择器 > 类选择器 > 标签选择器

CSS的属性

字体属性

属性	描述
font-style	设置字体风格
font-weight	设置字体粗细
font-size	设置字体的尺寸
font-family	设置字体系列
font	简写属性，作用是把所有针对字体的属性设置在一个声明中( 注意顺序 ) 例如： font: italic bold 16px " 楷体 ";

文本属性

属性	描述
color	设置文本的颜色，如 red ， #FF0000
line-height	设置文本的行高
text-align	设置文本的对齐方式 , 如 left 、 center 、 right
text-decoration	设置文本装修，如underline、none、line-through

背景属性（设置页面元素的背景样式）

属性	描述
background-color	背景色，取值如， red ， #FF0000
background-image	背景图片 , 如 : background-image: url( “./images/bg.png” );
background-position	背景位置
background-repeat	背景填充方式 , 取值： repeat-x \| repeat-y \| no-repeat
background	合写方式，如 background： #fff url(bg.png) left top no-repeat;

列表属性

属性	描述
list-style-image	将图片设置为列表标志
list-style-type	设置列表项标志的类型： disc(实心圆 ) \| circle ( 空心圆) \| square( 正方形 )
list-style	以上属性的合并简写 , 或none去掉默认属性设置

鼠标形状控制（cursor属性）

值	说明	图例
url	需使用自定义光标的URL	--
default	默认光标
pointer	超链接的指针
wait	指示程序正在忙
help	指示可用的帮助
text	指示文本
crosshair	鼠标呈现十字状
move	对象可被移动

盒子模型

外边距margin

margin-top 上

margin-right 下

margin-bottom 左

margin-left 右

margin

注意： margin: 上右下左 ; （顺时针方向）

边框border

类别	属性	描述
修饰属性	border-color	设置边框的颜色，如 border-color: #FF0;
	border-width	设置边框的宽度，如 border-width ： 2px
	border-style	设置边框的类型，如 solid （实线）、 dashed （虚线）、 none （无边框）等
四个方向	border-top	上边框
	border-right	右边框
	border-bottom	下边框
	border-left	左边框
简写方式	border	统一设置 4 个方向边框的属性，如border： 1px solid red;

内边距（padding）

padding -top 上

padding -right 下

padding -bottom 左

padding -left 右

padding

注意： padding : 上右下左; （顺时针方向）

盒子模型总尺度

盒子模型总尺度 = border + padding +margin + 内容尺寸（宽/高）

外边距可用于网页居中显示

margin-left: auto;

margin-right:auto;

块元素才能完全适用于盒子模型

使用 display 属性来相互转化：

none （元素隐藏，不可见）

block （转为块元素，独占一行）

inline （转为内联元素，不换行）

浮动属性（float）

取值：

left 左浮动

right 右浮动

none 不浮动

作用：

1.块元素同行排列显示，一般用于排版、分栏显示

2.设置浮动属性后，脱离文档流向指定的左或右边对齐直到父元素的边界或浮动的元素

注意：

使用浮动后要及时清除，以免影响其后的网页元素

清除浮动（clear）

清除浮动必要性：

1.浮动后，脱离了文档流不占网页空间

2.浮动后的网页元素会影响同级元素

clear属性清除浮动：

left

right

both

none

取值表明容器框的哪边不挨着浮动框

overflow属性

作用：

定义溢出元素内容区的内容会如何处理

取值：

visible （默认）

auto

hidden

scroll

定位属性（position）

1.relative（相对定位）

相对它原来的位置，通过指定偏移，到达新的位置。

仍在标准流中，它对父级盒子和相邻的盒子都没有任何影响

2.absolute（绝对定位）

相对已设定非static定位属性的父元素计算偏移量

fixed（相对浏览器固定定位，IE6不支持）

static（默认）

偏移量设置

X轴(left、right 属性)与Y轴（top、bottom属性）

可取值：像素或百分比

圆仔哟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页样式CSS

CSS的概念1.Cascading Style Sheet 级联样式表 2.表现HTML或XHTML文件样式的计算机语言包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定。CSS的作用 1.能控制页面的样式和布局 2.网页文件与样式文件相分离，提高开发效率块元素1.独占一行 2.可以定义宽度和高度常用块元素 div，p，ul，li内联元素1.一行排列显示 2.不能定义宽度和高度常用内联元素 span，a ，label
复制链接

扫一扫