CSS | CSS语言 | CSS基础 | CSS语言基础

已于 2023-02-23 14:33:12 修改
阅读量1.3k 收藏 10
点赞数 1
分类专栏： WEB 前端 文章标签： css
于 2020-12-13 21:49:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_Fei/article/details/111143459
版权

文章目录

前言

一、CSS语言介绍

二、CSS语言格式

三、选择器介绍

四、CSS属性

五、IE6兼容问题

前言

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

一、CSS语言介绍

CSS是Cascading Style Sheets的缩写，称为层叠样式表。

HTML是负责描述页面的语义、CSS是负责描述页面的样式、Js是负责描述页面的动态效果。

代码中一定要有注释、缩进、语义等，且必须拥有嵌套关系。

二、CSS语言格式

CSS语言格式
方式解释代码
行内样式表，不推荐使用在HTML标签中插入样式 
<div style=" width:200px; height:100px; color:red;">
    <!-- DIV中的内容 -->
</div>

页面内样式表在网页Style标签中插入样式 
<style type="text/css">
    /*选择器及其样式*/
</style>

外部引用样式表样式表存储于一个独立的文件中 
<link rel="stylesheet" href="./Project/Layout.css" />

三、选择器介绍

选择器介绍
名称语义代码
标签选择器所有的标签，都可以是选择器。选择的是页面上所有这种类型的标签 
<style type="text/css">
    a{
        /*选择的是当前页面上所有的a标签*/
    }
    div{
        /*选择的是当前页面上所有的div标签*/
    }
</style>

ID选择器任何的HTML标签都可以有id属性，表示这个标签的名字或语义。一个HTML页面，不能出现相同id属性的标签。 
<style type="text/css">
    #logo{
        /*选择的是当前页面上ID属性为logo的标签*/
    }
    #box{
        /*选择的是当前页面上ID属性为box的标签*/
    }
</style>
<body>
    <div>
        <a id="logo" href="../Project/logo.icon">Logo</a>
    </div>
    <div id="box">
        <!--  DIV中内容 -->
    </div>
</body>

类选择器任何的HTML标签都看可以有class属性。可以出现多个相同的class属性。同一个标签，可以同时属于多个类，可以有多个class属性，用空格隔开。 
<style type="text/css">
    .logo-a{
        /*选择的是当前页面上Class属性为logo-a的标签*/
    }
    .box-div{
        /*选择的是当前页面上Class属性为box-div的标签*/
    }
</style>
<body>
    <a class="logo-a" href="../Project/logo.icon">Logo</a>
    <div class="box-div logo-a">
        <!--  DIV中内容 -->
    </div>
</body>

后代选择器选择的是某个标签的后代 
<style type="text/css">
    div a{
        /*选择的是当前页面上为div的标签下的a标签*/
    }
    /*或者*/
    #logo-div a{
        /*选择的是当前页面上为div的标签下的a标签*/
    }
    /*或者*/
    .logobox-div a{
        /*选择的是当前页面上为div的标签下的a标签*/
    }
    /*或者*/
    .logobox-div .logo-a{
        /*选择的是当前页面上为div的标签下的a标签*/
    }
    /*有很多种表达方式，不一一列举*/
</style>
<body>
    <div id="logo-div" class="logobox-div">
        <a class="logo-a" href="../Project/logo.icon">Logo</a>
    </div>
</body>

交集选择器就是在两个标签相交的部分 
<style type="text/css">
    p.para{
        /*选择的是当前页面上为p的标签至Class属性为para的标签*/
    }
</style>
<body>
    <p>一个段落</p>
    <p>一个段落</p>
    <p class="para">一个段落</p>
    <p id="para">一个段落</p>
</body>

并集选择器两个标签或多个标签同时进行修改 
<style type="text/css">
    h2,p{
        /*选择的是当前页面上为h2的标签和p的标签*/
    }
</style>
<body>
    <h2>二级标题</h2>
    <p>一个段落</p>
</body>

儿子选择器选择某元素的子元素，IE7开始兼容 
<style type="text/css">
    h2>p{
        /*选择的是当前页面上为h2标签的下一级，也就是p标签*/
    }
</style>
<body>
    <h2>
        <p>一个段落</p>
    </h2>
</body>

序选择器通过排序的方式选择元素，IE8开始兼容 
<style type="text/css">
    ul li:first-child{
        /*选择的是当前页面上第一个li标签*/
    }
    ul li:last-child{
        /*选择的是当前页面上第四个li标签*/
    }
</style>
<body>
    <ul>
        <li>第一个li</li>
        <li>第二个li</li>
        <li>第三个li</li>
        <li>第四个li</li>
    </ul>
</body>

下一个兄弟选择器选择紧接着某个元素的所有某个元素，IE7开始兼容 
<style type="text/css">
    div+h2{
        /*选择的是当前页面DIV标签之后的第一个h2标签*/
    }
</style>
<body>
    <div>
        <h2>二级标题</h2>
        <h2>二级标题</h2>
        <p>我是一个段落</p>
    </div>
</body>

通配符 * 
<style type="text/css">
    *{
        /*选择的是当前页面所有内容，常用于格式化页面边距、字体等*/
        padding:0px;
        margin:0px;
    }
</style>
<body>
    <!-- Body -->
</body>

继承性Color、Text-开头的、Line-开头的、Font-开头的，其后代元素可继承样式
当选择器选择了某个元素时，要统计权重，ID选择器的数量大于类选择器的数量大于标签选择器的数量。ID选择器>类选择器>标签选择器。
!important关键字，增加当前属性提高权重，添加此关键字的属性的权重就是无穷大，提升的是一个属性，不是一个选择器，无法提升继承的权重。

四、CSS属性

CSS属性
名称语义代码
Width宽度属性 
width: 20px;/*设置宽度*/
min-width: 200px;/*设置最小宽度*/
max-width: 200px;/*设置最大宽度*/

Height高度属性 
height: 20px;/*设置高度*/
min-height: 200px;/*设置最小高度*/
max-height: 200px;/*设置最大高度*/

Color颜色属性 
color:red;

Font字体属性 
/*声明设置所有字体属性*/
font: normal 14px/28px "微软雅黑","Microsoft YaHei","宋体","SimSun","Arial","arial";
/*表示顺序如下*/
font-style: italic;/*设置字体样式，此处italic为斜体，normal为正常*/
font-size: 14px;/*设置字体大小、尺寸*/
/*设置多个字体，不支持则选择下一个*/
font-famiy: "微软雅黑","Microsoft YaHei","宋体","SimSun","Arial","arial";

Background背景属性 
background: #00FF00 url(bgimage.gif) no-repeat center center;/*声明设置所有背景属性*/
background-color: #FF0000;/*设置背景颜色*/
background-image: url(../Project/Logo.icon);/*设置背景图片*/

/*背景图片默认平铺父级元素，且padding区域也有背景*/
/*不  平铺：*/background-repeat:no-repeat;
/*横向平铺：*/background-repeat:repeat-x;
/*纵向平铺：*/background-repeat:repeat-y;

/*设置图片方向：可以为负数，也可以使用top、right、bottom、left、center*/
background-position: center center;/*向右移动量、向下移动量*/

/*设置图片是否固定*/
background-arrachment: fixed;/*表示背景会被固定，不会被滚动条滚走*/

background-size: 80px 60px;/*设置背景图像的尺寸*/

Text文本属性 
text-align: center;/*设置文本对齐方式*/
text-indent: 50px;/*规定文本首行缩进*/
text-shadow: 5px 5px 5px #FF0000;/*规定文本的阴影效果*/
text-transform: none;/*控制文本的大小写,capitalize每个单词以大写字母开头*/
line-height: 50px;/*设置行高*/

Border边框属性 
border: 5px solid red;/*声明设置所有边框属性*/
border-top: thick doube #ff0000;/*设置上边框的样式*/
border-top-width: 5px;/*设置上边框的宽度*/
border-top-style: double;/*设置上边框的样式*/
border-top-color: #ff0000/*设置上边框的颜色*/
border-right: thick doube #ff0000;/*设置右边框的样式*/
border-top-width: 5px;/*设置右边框的宽度*/
border-top-style: double;/*设置右边框的样式*/
border-top-color: #ff0000/*设置右边框的颜色*/
border-bottom: thick doube #ff0000;/*设置下边框的样式*/
border-top-width: 5px;/*设置下边框的宽度*/
border-top-style: double;/*设置下边框的样式*/
border-top-color: #ff0000/*设置下边框的颜色*/
border-left: thick doube #ff0000;/*设置左边框的样式*/
border-top-width: 5px;/*设置左边框的宽度*/
border-top-style: double;/*设置左边框的样式*/
border-top-color: #ff0000/*设置左边框的颜色*/

Padding内边距属性 
padding: 10px 20px 10px 20px;/*声明设置所有内边距属性*/
padding-top: 20px;/*设置上内边距*/
padding-right: 20px;/*设置右内边距*/
padding-bottom: 20px;/*设置下内边距*/
padding-left: 20px;/*设置左内边距*/

/*padding是描述父子元素和父子元素的距离*/
/*多使用padding，少使用margin*/
/*Padding会影响盒子大小，继承宽度的Padding不会增宽*/

Margin外边距属性 
margin: 10px 20px 10px 20px;/*声明设置所有外边距属性*/
margin-top: 20px;/*设置上外边距*/
margin-right: 20px;/*设置右外边距*/
margin-bottom: 20px;/*设置下外边距*/
margin-left: 20px;/*设置左外边距*/

/*margin是描述兄弟元素和兄弟元素的距离*/
/*使用margin居中表示：margin: 0 auto;盒子必须有width宽度*/
/*浮动的盒子无法使用margin: 0 auto;来居中*/
/*父级元素中，没有border属性时，子元素的margin是为行对齐的*/
/*margin:0 auto;只能居中盒子，不能居中文本；居中文本使用text-align:center;*/

Float浮动属性 
float: left;/*向左浮动*/
float: right;/*向右浮动*/

/*清除浮动1：父级元素增加高度*/
/*清除浮动2：使用clear:both;*/
/*清除浮动3：外墙或内墙，中间或结束加div*/
/*清除浮动4：使用overflow:hidden;溢出隐藏，可以撑出父级元素的高度*/

Display显示模式 
/*将行级元素变为块级元素，可以设置宽高，如不设置，则继承父级宽高;显示元素，不占有位置*/
display: block;
display: inline;/*将块级元素变为行级元素，不可以设置宽高*/
display: none;/*隐藏*/

Visibility元素可见 
Visibility：hidden;/*隐藏*/
Visibility: visible;/*显示，占有位置*/

Overflow溢出隐藏 
overflow: hidden;/*溢出隐藏*/

Line-Height行高属性 
line-height:12px;/*行高属性*/

Text-Indent缩进属性 
text-indent:2em;/*首行缩进2个汉字*/

超链接伪类超链接伪类 
/*超链接伪类用:冒号表示，且不可更改顺序*/
a:link{color:red;}/*表示用户没有点击过*/
a:visited{color:red;}/*表示用户访问过*/
a:hover{color:red;}/*表示鼠标悬停的样式*/
a:active{color:red;}/*表示用户点击时的样式*/

/*a标签属于特殊标签，不能继承text、font等属性*/

无序列表的圆点无序列表的圆点 
ul{list-style: none;}/*去掉无序列表的圆点*/

相对定位相对定位 
position: relative;/*让元素相对原来的位置进行位置调整，不会脱离标准文档流*/
/*使用top、right、bottom、left属性移动*/
/*上一层或下一层使用z-index属性，默认为0，只有定位的元素才能使用*/
/*值大压盖值小的*/

绝对定位绝对定位 
position: absolute;/*比相对定位灵活，会脱离标准文档流。定位参考点是页面左上角或父级元素左上角*/
/*使用top、right、bottom、left属性移动*/
/*绝对定位居中：left:50%; margin-left:盒子总宽度的一半;*/
/*上一层或下一层使用z-index属性，默认为0，只有定位的元素才能使用*/
/*值大压盖值小的*/

固定定位固定定位 
position: fixed;/*会脱离标准文档流,参考点是浏览器窗口，IE6不兼容*/
/*使用top、right、bottom、left属性移动*/
/*上一层或下一层使用z-index属性，默认为0，只有定位的元素才能使用*/
/*值大压盖值小的*/

静态定位静态定位 
position: static;/*默认定位，正常显示文档流中*/

鼠标指针鼠标指针 
Cursor: default; /*默认光标*/
Cursor: auto;	/*默认。浏览器设置的光标。*/
Cursor: crosshair;	/*光标呈现为十字线。*/
Cursor: pointer;	/*光标呈现为指示链接的指针（一只手）*/
Cursor: move;	/*此光标指示某对象可被移动。*/
Cursor: e-resize;	/*此光标指示矩形框的边缘可被向右（东）移动。*/
Cursor: ne-resize;	/*此光标指示矩形框的边缘可被向上及向右移动（北/东）。*/
Cursor: nw-resize;	/*此光标指示矩形框的边缘可被向上及向左移动（北/西）。*/
Cursor: n-resize;	/*此光标指示矩形框的边缘可被向上（北）移动。*/
Cursor: se-resize;	/*此光标指示矩形框的边缘可被向下及向右移动（南/东）。*/
Cursor: sw-resize;	/*此光标指示矩形框的边缘可被向下及向左移动（南/西）。*/
Cursor: s-resize;	/*此光标指示矩形框的边缘可被向下移动（南）。*/
Cursor: w-resize;	/*此光标指示矩形框的边缘可被向左移动（西）。*/
Cursor: text;	/*此光标指示文本。*/
Cursor: wait;	/*此光标指示程序正忙（通常是一只表或沙漏）。*/
Cursor: help;	/*此光标指示可用的帮助（通常是一个问号或一个气球）。*/

内容溢出内容溢出 
overflow: visible;	/*默认值。内容不会被修剪，会呈现在元素框之外。*/
overflow: hidden;	/*内容会被修剪，并且其余内容是不可见的。*/
overflow: scroll;	/*内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。*/
overflow: auto;	/*如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。*/
overflow: inherit;	/*规定应该从父元素继承 overflow 属性的值。*/

五、IE6兼容问题

  1. IE6不支持小于12px的盒子（微型盒子）：解决办法：设置盒子的字号：_font-size:2px;，要小于盒子的高度。
  2. IE6可以识别加上“_”的属性，专有符号下划线：如_font-size=24px;专属于IE6浏览器的Hack代码。
  3. IE6不支持用overflow:hidden;来清除浮动：解决办法：设置放大属性：_zoom:1;其中数字是几，就放大几倍。
  4. 纵向盒子的margin不叠加，以较大值的为准，如margin-bottom:30px;和margin-top:50px;以50px为准。
  5. IE6中，向左浮动的列表，同方向的margin，第一个列表会有双倍间距。
  6. IE6中，子元素浮动时，增加边距的情况下，会多3个像素。
上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合
04-23
【CSS基础学习】是网页设计领域中的重要环节，它是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。CSS（层叠样式表）让网页设计者能够分离内容与表现，使得网页设计更加灵活且易于...
html+css的基础学习.zip
01-01
html+css的基础学习html+css的基础学习html+css的基础学习html+css的基础学习 html+css的基础学习html+css的基础学习html+css的基础学习html+css的基础学习 html+css的基础学习html+css的基础学习html+css的基础学习...
03 CSS
qq_28384023的博客
04-14 161
1. 什么是CSS 是一种专门在浏览器编译并执行的编程语言. 用于定位浏览器中HTML标签并对定位的HTML标签中【样式属性】进行统一管理 2. HTML中的属性分类 2.1 基本属性 大多数HTML标签都拥有属性，是一个非常庞大群体 比如 id属性，相当于身份证编号，用于区分HTML标签 <input type="text" id="one"/> <input type="text" id="two"/> 比
CSS（网页样式语言）基础
10-25 2021
所谓全栈，个体可以独立地完成系统的设计、开发、测试、部署以及运维。打通一个领域从无到有的全过程。 为什么会有 markdown 文本编辑显示工具呢，因为 html 太重了。markdown 是 html 的一种简化思路，css 则是另外一种。css 是对 html 其中部分工作的提取和分担，这部分的工作就在于 html 各种标签的属性以及 style 属性的定制等。使得 html 单纯用...
css语言介绍_CSS的非常介绍
weixin_26741235的博客
09-10 321
css语言介绍About two weeks ago, I was still in the bronze age of frontend web programming. I was simply able to render information onto an HTML page using RAILS. Without my partner’s assistance and his ex...
CSS语言基础
weixin_42194337的博客
08-31 1234
CSS语言基础 CSS概述 CSS基本语法结构 样式是CSS的基本单元，每个样式包含两部分内容： 选择器 声明：由属性和属性值构成以（;）结束 属性 : 值 属性 : 值 div {color:blue;font-size:12px;} 选择器 声明 声明 注释：/* 注释内容 */ CSS的使用 内嵌样式 也叫行...
CSS语言
weixin_64189867的博客
10-04 611
CSS是Cascading Style Sheets（级联样式表）。CSS是一种样式表语言，用于为HTML文档控制外观，定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。可将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分。CSS与HTML的关系HTML是网页内容CSS定义页面的样式。
网页制作css基础学习教程
06-09
这套Java基础视频教程详细讲解了什么是css 。层叠样式表(英文全称：CascadingStyleSheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅...
HTML5+CSS3 精美登陆界面源码
01-19
HTML5是超文本标记语言（HTML）的最新版本，它在HTML4的基础上进行了很多改进。新特性包括语义化的标签（如、、等），使得页面结构更加清晰；离线存储（Web Storage）和本地数据库（IndexedDB）支持，使得网页可以...
基于html+css+javascript基础的网站页面
最新发布
01-30
该项目适合初学者进行学习，有效的掌握HTML,CSS，javascript等技术的基础知识。资源包含源码 资源下载|如果你正在做毕业设计，需要源码和论文，各类课题都可以，私聊我。 商务合作|如果你是在校大学生，正好你又懂...
二、CSS编程语言【简单了解】
weixin_51271043的博客
07-29 1278
一、介绍 1·是一种专门在浏览器编译并执行的语言。 2·用于定位浏览器中HTML标签并定位的HTML标签中【样式属性】进行统一管理 二、HTML标签属性分类 1·基本属性 大多是HTML标签都拥有属性，是一个非常庞大的群体 比如 id属性，相当于身份证编号，用于区分HTML标签 <input type="text" id="one"/> ...
CSS语言详解
ciyudadi的博客
08-13 2152
CSS用于设置网页样式 CSS语言特性： 1.层叠性: 多种不同的CSS样式可以叠加使用（只要不是相同的属性冲突就可以叠加使用），如：一个选择器定义了字体大小为12像素，另一个选择器定义了字体颜色为红色，这两个选择器都作用于同一个标记，这时这个标记的字体大小为12像素，颜色为红色 2.继承性： 子标记可以继承父标记的某些样式（只要适用于子标记的样式，都可以继承使用） CSS的注释：/* */ 引入CSS样式表（不同的引入决定了不同的用法）： 1.行内式： <标记名 style="属性1:属性值1; 属
html css语言简介,CSS 介绍
weixin_39802132的博客
05-31 516
CSS 介绍CSS代表级联样式表( Cascading Style Sheets)。CSS是一种标准样式表语言，用于描述网页的表示形式(即布局和格式)。在CSS之前，HTML文档的几乎所有表示形式属性都包含在HTML标记内(特别是在HTML标签内)。所有字体颜色，背景样式，元素对齐方式，边框和大小都必须在HTML中明确描述。这样做产生的后果，就是由于样式信息被重复地添加到网站的每个页面中，因此大型...
css 的介绍
THE ORDER
02-02 912
1. css 的定义 css(Cascading Style Sheet)层叠样式表，它是用来美化页面的一种语言。 没有使用css的效果图 使用css的效果图 2. css 的作用 美化界面, 比如: 设置标签文字大小、颜色、字体加粗等样式。 控制页面布局, 比如: 设置浮动、定位等样式。 3. css 的基本语法 选择器{ 样式规则 } 样式规则： 属性名1：属性值1; 属性名2：属性值2; 属性名3：属性值3; … 选择器:是用来选择标签的，选出来以后给标签加样式。 代码示例: div{ width
CSS介绍
Max的博客
08-26 1707
CSS介绍 文章目录CSS介绍区块标签div&spanHTML新增语义化标签传统布局（DIV+CSS）h5语义标签布局块级元素与行内元素CSS入门语法规范CSS实例CSS样式在html页面中的几种使用方式选择器(Selectors)元素选择器关系选择器属性选择器伪类选择器伪对象选择器选择器层叠选择器优先级常用属性背景边框颜色尺寸颜色尺寸字体文本字体文本 区块标签div&span ​...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Vin Cente

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值