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

已于 2023-02-23 14:33:12 修改
阅读量1.1k 收藏 9
点赞数 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个像素。
Vin Cente
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
css基础教程之CSS基础语法
09-25
主要介绍了css基础教程之CSS基础语法,本文详细介绍了CSS的一些基础知识,需要的朋友可以参考下
html5 css3 简单基础知识笔记
01-27
html5 css3 简单基础知识笔记
CSS编程语言语法、选择器与HTML标签属性简介
最新发布
Reggie97的博客
04-04 1006
本文主要介绍了CSS编程语言的定义，作用，优势等，介绍了CSS的语法和选择器等内容
css 基础样式 base.css
04-28
css基础样式
HTML基础与层叠样式单CSS课件
06-21
HTML基础与层叠样式单CSS课件
CSS 基础使用.md
01-13
CSS 基础使用
CSS看这一篇就够啦，CSS基础大全，可用于快速回顾知识，面试首选
a2868221132的博客
03-11 1万+
CSS看这一篇就够啦，CSS基础大全，可用于快速回顾知识，面试首选
CSS基础（超详解）
热门推荐
m0_52896041的博客
11-30 2万+
Css (层叠样式表)是种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。
关于CSS（详细篇）
weixin_53342968的博客
02-09 2807
详细介绍了CSS的含义、属性、选择器等
CSS概述及基本语法[web前端]
m0_58450531的博客
09-07 1061
新浪
【CSS基础】
书生-w的博客
05-10 1万+
CSS 能够对网页中元素位置的排版进行像素级的精确控制，实现美化页面的效果，且能够做到页面的样式和结构分离。使用了CSS，就相当于女生化妆之后。
CSS知识点总结
m0_60560321的博客
08-13 1784
CSS学习期间记录的部分知识点总结
CSS语言
余杯冷饮的博客
04-04 505
一、CSS是什么 (Cascading Style Sheet):层叠级联样式表 CSS:表现(美化网页),字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动 二、CSS怎么用(快速入门) 1.行内样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head&g
CSS语言详解
ciyudadi的博客
08-13 2105
CSS用于设置网页样式 CSS语言特性： 1.层叠性: 多种不同的CSS样式可以叠加使用（只要不是相同的属性冲突就可以叠加使用），如：一个选择器定义了字体大小为12像素，另一个选择器定义了字体颜色为红色，这两个选择器都作用于同一个标记，这时这个标记的字体大小为12像素，颜色为红色 2.继承性： 子标记可以继承父标记的某些样式（只要适用于子标记的样式，都可以继承使用） CSS的注释：/* */ 引入CSS样式表（不同的引入决定了不同的用法）： 1.行内式： <标记名 style="属性1:属性值1; 属
CSS——CSS基础知识
流楚丶格念的博客
06-26 7001
文章目录CSS的发展历程CSS 网页的美容师CSS初识引入CSS样式表（书写位置）内部样式表行内式（内联样式）外部样式表（外链式）三种样式表总结（位置）CSS样式规则外链案例内链案例 CSS的发展历程 从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生
CSS基础语句
weixin_53968665的博客
12-25 1338
CSS
CSS知识超详细
m0_71012114的博客
08-23 2005
本文详细介绍了CSS详细知识，最详细的CSS知识点大全。
css怎么写出|_|
05-25
要在 CSS 中写出 |_|，可以使用伪元素 ::before 或 ::after，并设置其 content 属性为 “|_|”，然后再设置其他样式属性来调整其位置和样式。 例如： ``` .content::before { content: "|_|"; display: inline-block; margin-right: 5px; /* 调整与文字之间的距离 */ transform: translateY(-1px); /* 调整位置 */ } ``` 这样就可以在 .content 元素前面添加一个 |_| 的元素了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Vin Cente

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

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

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

打赏作者

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

抵扣说明：

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

余额充值