CSS初级-上

最新推荐文章于 2024-07-26 08:00:00 发布

God phoenix

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量92

点赞数

文章标签： css html css3 前端 html5

本文链接：https://blog.csdn.net/weixin_45294105/article/details/121760855

版权

css样式篇

引用方式

外部样式用link

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

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

内部样式在head部分用style引用css文件

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

行内样式直接使用style写相关样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

标签	描述
style	定义样式定义。
link	定义资源引用。
div	定义文档中的节或区域（块级）。
span	定义文档中的行内的小块或区域。
font	规定文本的字体、字体尺寸、字体颜色。不赞成使用。
basefont	定义基准字体。不赞成使用
center	对文本进行水平居中。不赞成使用

h1{
    color:red;font-size:14px
}
选择器{属性:值}  声明是属性＋值

css中的选择器指向html中的元素

css id 选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id

这条 CSS 规则将应用于 id=“para1” 的 HTML 元素：

#para1 {
  text-align: center;
  color: red;
}

通用选择器（*）选择页面上的所有的 HTML 元素。

用法*{属性:值}

所有简单的 CSS 选择器

选择器	例子	例子描述
class	.intro	选取所有 class=“intro” 的元素。
id	#firstname	选取 id=“firstname” 的那个元素。
*	*	选取所有元素。
element	p	选取所有 p 元素。
element,element,…	div, p	选取所有 div 元素和所有 p 元素。

注意:请勿在属性值和单位之间添加空格

层叠顺序

当为某个 HTML 元素指定了多个样式时，会使用哪种样式呢？

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：

行内样式（在 HTML 元素中）
外部和内部样式表（在 head 部分）
浏览器默认样式

因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。

css注释

/* */多行单行都可以

css颜色(暂时略过)

CSS背景

background-color 指定元素的背景色
background-image 背景图像
background-repeat
background-attachment
background-position

background-color: lightblue;

background-image: url("paper.gif");

/*默认情况下，background-image 属性在水平和垂直方向上都重复图像。
某些图像应只适合水平或垂直方向上重复，否则它们看起来会很奇怪，此时可以试着用background-repeat*/
background-repeat: repeat-x;/*-x -y分别是水平和垂直*/
/*background-repeat 属性还可指定只显示一次背景图像：*/
background-repeat: no-repeat;

/*background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）*/
background-attachment: fixed;/*指定应该固定背景图像*/
background-attachment: scroll;/*指定背景图像应随页面的其余部分一起滚动：*/

/*background-position 属性用于指定背景图像的位置。*/
background-position: right top;

CSS background - 简写属性

如需缩短代码，也可以在一个属性中指定所有背景属性。它被称为简写属性。

使用简写属性在一条声明中设置背景属性

background: #ffffff url("tree.png") no-repeat right top;

在使用简写属性时，属性值的顺序为color image repeat attachment position

CSS边框 border

边框样式

border-style 属性指定要显示的边框类型。

允许以下值：

dotted 定义点线边框
dashed 定义虚线边框
solid 定义实线边框
double -定义双边框
groove 定义 3D 坡口边框。效果取决于 border-color 值
ridge 定义 3D 脊线边框。效果取决于 border-color 值
inset -定义 3D inset 边框。效果取决于 border-color 值
outset -定义 3D outset 边框。效果取决于 border-color 值
none -定义无边框
hidden 定义隐藏边框

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

p.dotted {border-style: dotted;}/*点状边框*/
p.dashed {border-style: dashed;}/*虚线边框*/
p.solid {border-style: solid;}/*实现边框*/
p.double {border-style: double;}/*双线边框*/
p.groove {border-style: groove;}/*凹槽边框，效果取决于border-color的值*/
p.ridge {border-style: ridge;}/*垄状边框，效果取决于border-color的值*/
p.inset {border-style: inset;}/*3D inset边框，效果取决于border-color的值*/
p.outset {border-style: outset;}/*3D outset边框，效果取决于border-color的值*/
p.none {border-style: none;}/*无边框*/
p.hidden {border-style: hidden;}/*，隐藏边框*/
p.mix {border-style: dotted dashed solid double;}/*混合边框*/

CSS 边框宽度

border-width 属性指定四个边框的宽度。

可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick：

p.one {
  border-style: solid;
  border-width: 5px;/*5px是属性值，可以用于调整边框*/
}
border-width: 20px 5px;/*2个属性时:上下是第一个，左右的第二个*/
border-width: 25px 10px 4px 35px; /*4个属性时 边框顺序为顺时针，从上开始 上右下左*/

CSS 边框颜色

border-color 属性用于设置四个边框的颜色。

可以通过以下方式设置颜色：

name 指定颜色名，比如 “red”
HEX 指定十六进制值，比如 “#ff0000”
RGB 指定 RGB 值，比如 “rgb(255,0,0)”
HSL 指定 HSL 值，比如 “hsl(0, 100%, 50%)”
transparent

注释:如果未设置 border-color，则它将继承元素的颜色

border-color可以设置1-4个值，顺序顺时针从上开始上右下左

例：border-color: red green blue yellow;
上红、右绿、下蓝、左黄

HEX值 边框的颜色也可以使用十六进制值（HEX）来指定：

border-color: #ff0000; /* 红色 */

RGB 值

border-color: rgb(255, 0, 0);

HSL值

border-color: hsl(0, 100%, 50%);

CSS边框各边

在 CSS 中，还有一些属性可用于指定每个边框(顶部、右侧、底部和左侧)

p{
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

4个值：上右下左 ----- 3个值：上左右下

2个值：上下左右 ----- 1个值：边框样式都一样

CSS简写边框属性

border 属性是以下各个边框属性的简写属性：

border-width
border-style（必需）
border-color

边框也可以只为一个边指定所有单个边框属性

圆角边框

border-radius 属性用于向元素添加圆角边框

border-radius: 5px;

所有 CSS 背景属性

属性	描述
background	在一条声明中设置所有背景属性的简写属性。
background-attachment	设置背景图像是固定的还是与页面的其余部分一起滚动。
background-clip	规定背景的绘制区域。
background-color	设置元素的背景色。
background-image	设置元素的背景图像。
background-origin	规定在何处放置背景图像。
background-position	设置背景图像的开始位置。
background-repeat	设置背景图像是否及如何重复。
background-size	规定背景图像的尺寸。

所有 CSS 边框属性

属性	描述
border	简写属性，在一条声明中设置所有边框属性。
border-color	简写属性，设置四条边框的颜色。
border-radius	简写属性，可设置圆角的所有四个 border-*-radius 属性。
border-style	简写属性，设置四条边框的样式。
border-width	简写属性，设置四条边框的宽度。
border-bottom	简写属性，在一条声明中设置所有下边框属性。
border-bottom-color	设置下边框的颜色。
border-bottom-style	设置下边框的样式。
border-bottom-width	设置下边框的宽度。
border-left	简写属性，在一条声明中设置所有左边框属性。
border-left-color	设置左边框的颜色。
border-left-style	设置左边框的样式。
border-left-width	设置左边框的宽度。
border-right	简写属性，在一条声明中设置所有右边框属性。
border-right-color	设置右边框的颜色。
border-right-style	设置右边框的样式。
border-right-width	设置右边框的宽度。
border-top]	简写属性，在一条声明中设置所有上边框属性。
border-top-color	设置上边框的颜色。
border-top-style	设置上边框的样式。
border-top-width	设置上边框的宽度。

God phoenix

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS初级-上

css样式篇引用方式外部样式用link当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>内部样式在head部分用style引用css文件当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <head>&l
复制链接

扫一扫