CSS基础知识复习

最新推荐文章于 2021-12-05 22:54:23 发布

ying-0608

最新推荐文章于 2021-12-05 22:54:23 发布

阅读量262

点赞数

文章标签： css

本文链接：https://blog.csdn.net/ying_0608/article/details/109627245

版权

CSS基础知识

一.CSS概念
二、CSS常用的三种引入方式
三、CSS选择器
四、背景属性
五、边框属性

一.数据集获取及预处理

CSS（Cascading Style Sheet ），层叠样式表，它用于控制页面样式并且允许将样式信息和网页内容分离的一种标记性语言。CSS的引入就是为了使得HTML语言能够更好地适应页面的美工设计。它以html语言为基础，提供了丰富的格式化功能，如字体、颜色、背景等，并且页面设计侄儿可以针对各种不同的可视化浏览器设置不同的样式风格。

二、CSS常用的三种引入方式

1、行内样式

是在标记的style属性中设定css样式。这种方式没有体现出css的优势，不推荐使用

<body>
	<!-- 行内样式 -->
	 <p style = "color :blue; font-size:20px; ">正文内容1 </p>
	 <p style = "color:#000000; font-style:italic;"> 正文内容2</p>
	 <p style = "color:#ffooff;font-size:23px; font-weight:bold">正文内容3</p>
</body>

2、内部样式

是将CSS写在与之间，并且用

<head>
<style type = "text/css">
<!-- 内部样式 -->
	p {
		color:red;
        font-weight:bold;
		text-decoration:underline;
		font-size:23px;
	  }  
</head>
<body>
	 <p>红色、粗体、下划线、23px的效果</p>
</body>

3、外部样式

将一个.css文件引入到HTML文件中（推荐）

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

三、CSS选择器

1、类选择器

语法： .类名｛样式属性：值；｝
元素使用class="类名"来使用这个样式

2、id选择器

语法： #id名｛样式属性：值；｝
元素使用id="id名"来使用这个样式

3、标签选择器

语法：标签名｛样式属性：值；｝
页面中所有的该标签都是这个样式

4、通用选择器

语法： *｛样式属性：值；｝
页面中所有的元素都是这个样式

选择器权重：

!important(1000) > id选择器(100) > 类选择器(10) > 标签选择器(1)

四、背景属性

background-color: cornflowerblue 设置背景颜色
background-image: url(‘1.jpg’); 设置背景图片
background-repeat: no-repeat(repeat); 设置背景是否平铺
background-position: right top (20px 20px);定位背景图像

属性综合写法：background:#ffffff url(‘1.png’) no-repeat right top;

五、边框属性

border-color: blue; 边框颜色
border-style: dotted(点状轮廓) / solid(实线轮廓) / dashed:虚线轮廓; 边框样式
border-width: 1px 2px 3px 4px; 边框宽度

{①如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。

②如果只提供一个，将用于全部的四边。

③如果提供两个，第一个用于上、下，第二个用于左、右。

④如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。}

border-radius:25px ; 设置或检索对象使用圆角边框

属性综合写法: border:1px solid blue;

ying-0608

关注

0
点赞
踩
0

收藏

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

CSS基础知识一.CSS概念二、CSS常用的三种引入方式1、行内样式2、内部样式3、外部样式三、CSS选择器1、类选择器2、id选择器3、标签选择器4、通用选择器四、背景属性五、边框属性一.数据集获取及预处理CSS（Cascading Style Sheet ），层叠样式表，它用于控制页面样式并且允许将样式信息和网页内容分离的一种标记性语言。CSS的引入就是为了使得HTML语言能够更好地适应页面的美工设计。它以html语言为基础，提供了丰富的格式化功能，如字体、
复制链接

扫一扫