CSS基础知识整理

Wesley13
• 阅读 613

1 什么是CSS?

CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。

CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。

2 CSS语法

  • CSS基础语法

    CSS规则由两个主要部分构成:选择器以及一条或多条声明。

    每条声明由一个属性和一个值组成。属性(property)是设置的样式属性,每个属性有一个值,属性和值被冒号分开。

    比如 selector{property:value}选择器通常是需要改变样式的HTML元素。

    比如 h1{color:red; font-size:14px;} h1是选择器,color和font-size是属性,red和14px是值。

    注意:  
    如果定义不止一个声明则需要用分号将每个声明分开。例如:p{text-align:center;color:red}

    如果值为若干单词,则要给值加引号: 例如:p {font-family: "sans serif";}    

  • CSS高级语法

    选择器的分组   h1,h2,h3,h4,h5,h6 { color: green; }

    继承及其问题:根据 CSS,子元素从父元素继承属性。 body { font-family: Verdana, sans-serif; }

3 创建CSS

CSS 创建样式表分为三种情况:

  • 内部样式表

  • 行内式(内联样式)

  • 外部样式表(外链式)

     

​ 样式优先级:内联样式>内部样式>外部样式

三种样式表区别:

行内样式表:优点书写方便;缺点没有实现样式和结构相分离;使用情况较少;控制范围:控制一个标签(少)。

内部样式表:优点部分结构和样式相分离;缺点没有彻底分离;使用情况较多;控制范围:控制一个页面(中)。

外部样式表:优点完全实现结构和样式相分离;缺点需要引入;使用情况最多,推荐;控制范围:控制整个站点(多)。

4 id和class选择器

ID选择器:

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式,id 属性和身份证一样具有唯一性。 HTML元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以 "#" 来定义。 注意: id 属性不能以数字开头。

语法:
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

class选择器:

class 选择器用于描述一组元素的样式,也叫做类选择器。 class 可以在多个元素中使用,并且一个元素也可以指定多个类名。在 CSS 中,类选择器以一个点 "." 号来定义。同样的类名的第一个字符也不能使用数字。

语法:
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

​ ID 选择器和类(class)选择器的区别:

相同点:都可以应用于任何元素

不同点:

  • ID 选择器只能在文档中使用一次,而类选择器可以使用多次。

  • 可以使用类选择器词列表方法为一个元素同时设置多个样式(也就是一个元素可以制定多个类名),而ID只能指定一个。

5 CSS元素选择器

最常见的CSS选择器就是元素选择器,也就是标签选择器,也就是在HTML中元素的最基本的选择器。

语法:
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

​ 标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时这也是他的缺点,不能设计差异化样式。

6 CSS背景(background)

background 属性用于定义 HTML 元素的背景。

定义元素背景效果的 CSS 属性有五种:

background-color         背景颜色

background-image         背景图像

background-repeat         背景图像设置水平或垂直平铺或不平铺

background-position       背景图像设置定位

background-attachment     背景图像设置固定或滚动 ​

背景属性简写:
body{
    background:green url('images/fix.gif') no-repeat fixed 12px 24px;
}
当使用简写属性时,属性值的顺序依次为:
background-color --> background-image --> background-repeat --> background-attachment --> background-position

7 CSS外观属性

CSS文本格式主要分为:文本颜色(color)、文本对齐方式、文本修饰、文本阴影、文本缩进、文本间距、字间距、文本空白处理、文本转换。

文本对齐方式:text-align属性有四个值:left,center,right,justify(两端对齐)。属性默认值为auto。

文本修饰:text-decoration 属性用来设置或删除文本的修饰。 主要是用来删除超链接的下划线,也可以使用其他值来设置文本的修饰,

text-decoration:overline, 设置文本上划线。

text-decoration:line-through, 设置文本中间划线。

text-decoration:underline; 设置文本下划线。

文本阴影:text-shadow: x y shadow color;其中 x 是水平阴影的偏移值,y 是垂直阴影的偏移值,shadow 用于指定阴影的模糊值,即模糊效果的作用距离,不允许负值。color 指定阴影的颜色。该属性有两个作用,产生阴影和模糊主体。

文本缩进:用来指定文本的首行缩进,允许为负值,如果值是负数,第一行则向左缩进。CSS表示为:text-indent:2em,em 是相对文字大小的单位,1em 就是1个文字大小,2em 就是两个文字大小。

文本间距:行高,也就是文本行的高度。例如:line-height:22px;

字间距:letter-spacing 和 word-spacing 这两个属性都可用来增加或减少文本间的空白,即字间距。

不同的是:letter-spacing 属性设置字符间距,而 word-spacing 属性设置单词间距。

注意:word-spacing 属性对中文无效,因此在设置中文的字间距时请使用 letter-spacing 属性。

 letter-spacing 和 text-align:justify 是两个冲突的属性,不能同时使用,

 text-align:justify 是设置内容根据宽度自动调整字间距,使各行的长度恰好相等,实现文本两端对齐效果,

 而 letter-spacing 是指定一个固定的字间距。

文本空白处理:white-space 属性指定元素内的空白如何处理,默认值为 normal 空白会被浏览器忽略。 该属性还有4个值:nowrap 文本不会换行,禁止换行,文本会在同一行上继续,直到遇到
标签为止。 pre 空白会被浏览器保留,这种方式类似 HTML 中的

 标签,用于定义预格式文本。

          pre-wrap 指定保留空白符序列,但是正常地进行换行。

          pre-line 指定合并空白符序列,但是保留换行符,并允许自动换行。

文本转换:text-transform 属性控制文本中的字母。是用来指定在一个文本中的大写和小写字母,可用于将所有字句变成大写或小写字母,或每个单词的首字母大写。 text-transform:capitalize; 定义文本中的每个单词以大写字母开头。

        text-transform:uppercase; 定义文本仅有大写字母。

        text-transform:lowercase; 定义文本仅有小写字母。

8 CSS字体 (font)

font 属性可用于设置文本字体,定义样式,如加粗,大小等,属于复合属性,也叫做简写属性。

简写顺序:

font-style(字体样式) --> font-variant(字体变形) --> font-weight(字体加粗) --> font-size(字体大小)/line-height --> font-family(设置文本字体)

注意,font-size 和 font-family 的值是必需的,否则无效。 ​

(1)是绝对或相对大小,可以使用px、em、%和em组合来设置。

1 使用px设置:通过像素设置文本大小是设置的整个页面。

2 使用em设置:1em等于当前的字体尺寸,比如设置的默认字体是12px,因此1em的默认大小就是12px。像素转换em:px/12 = em

3 使用%和em组合设置:在所有浏览器的解决方案中,设置 元素的默认字体大小是 100%,可以显示相同的文本大小,并允许所有浏览器缩放文本的大小。

<head>
    <style>
        body{font-size:100%}
        p{font-size:2.5em; }   /* 2.5\*16=40px \*/
    </style>
</head>
<body>
    <p>使用%和em组合设置</p>
</body>

​ (2)font-style 属性主要用于指定斜体文字。

属性有三个值:

  • normal正常显示文本
  • italic 定义斜体
  • oblique 定义倾斜的文字

9 CSS链接

链接的四种状态是:

a:link - 正常,未访问过的链接。

a:visited - 已访问过的链接。

a:hover - 当鼠标滑动到链接上时。

a:active - 链接被点击的那一刻。

10 CSS列表

作用:

  • 设置不同的列表项标记
  • 设置列表项标记为图像

修改列表项标记使用 list-style-type,使用图像作为标记可以利用 list-style-image 属性完成。 ​

1 无序列表: 无序列表经常用来做导航栏菜单,通常都需要隐藏无序列表项的标记,那么就使用 list-style-type:none,表示无标记。list-style-type 属性的默认值为 disc 实心圆,即小黑点。除了无标记还可以修改标记,例如circle空心圆,square实心方块。 ​

2 有序列表: 有序列表项标记默认使用数字样式显示,即 list-style-type:decimal。 ​

3 图像作为列表项标记 要指定列表项标记的图像,可以使用 list-style-image 属性,只需要简单地设置一个 url() 值,就可以将图像作为标记类型。  

列表属性简写:list-style:list-style-type,list-style-position,list-style-image;

11 CSS表格

表格边框: border

表格宽度和高度:width 和 height

表格对齐:text-align 和 vertical-align

表格内边距:tr,td的padding设置 ​

<head>
<style>
#tab{
    width:50%;
     font-family:"微软雅黑";
       /*设置是否将表格边框合并为单一线条的边框*/
     border-collapse:collapse;
 }
 #tab th,#tab td{
       /*表格边框*/
     border:1px solid #7AC942;
       /*表格内边距*/
     padding:5px 10px;
 }
 #tab th{
     color:white;
     background-color:#9C3;
     font-size:1.125em;
       /*左对齐*/
     text-align:left;
     padding-top:4px;
     padding-bottom:8px;
 }
 #tab .list td{
       /*边颜色*/
     color:#000;
       /*背景颜色*/
     background-color:#FFC;
 }
 caption{
     margin-bottom:10px;
     font-weight:bold;
 }
</style>
</head>
<body>
 <table id="tab">
     <caption>食物类别</caption>
     <thead>
         <tr class="list">
             <th>粗粮</th>
             <th>蔬菜</th>
             <th>水果</th>
         </tr>
     </thead>
     <tbody>
         <tr>
             <td>大豆</td>
             <td>黄瓜</td>
             <td>香蕉</td>
         </tr>
         <tr class="list">
             <td>高粱</td>
             <td>菠菜</td>
             <td>柠檬</td>
         </tr>
         <tr class="list">
             <td>燕麦片</td>
             <td>白菜</td>
             <td>西瓜</td>
         </tr>
     </tbody>
 </table>
</body>

12 CSS 选择器

1 分组和嵌套选择器

(1)分组选择器,例如:

h1{color:gray;}
     p{color:gray;}
可以写成:h1, p{color:gray;}

(2)嵌套选择器,例如:

.div1 p{
     color:white;
}
.div1 p a{
     color:yellow;
     font-weight:bold;
}
<div class="div1">
     <p>嵌套选择器
         <a href="#">深层嵌套选择器</a>
     </p>
</div>

(3)通配符选择器

  *{
      padding:0;
      margin:0;
  }

​ 2 属性选择器

(4)属性选择器:属性选择器使用[attr]

例如:把所有带有 title 属性的元素的字体设置为红色

<head>
    <style>
        \[title\]{
            color:red;
        }
    </style>
</head>
<body>
    <h1>h1 标题不带有 title 属性</h1>
    <h2 title="标题">h2 可以设置样式</h2>
    <a href="#" title="链接">超链接可以设置样式</a>
</body>

(5)属性和值选择器:属性选择器使用[attr=value]

<head>
    <style>
        \[title=Hello\]{
            color:blue;
        }
    </style>
</head>
<body>
    <h1 title="Hello world">h1 标题 title="Hello world"</h1>
    <h2 title="Hello">h2 可以设置样式</h2>
    <a href="#" title="Hello">超链接可以设置样式</a>
</body>

(6)属性和多个值的选择器:使用有两种情况:属性值用空格分隔使用:[attr~=value]   属性值用连字符分隔则使用:[attr|=value] 例如:把包含 title='Hello' 的元素的字体设置为绿色,使用 ~ 分隔属性和值

<head>
    <style>
        \[title~=Hello\]{
            color:green;
        }
        \[lang|=zh\]{
            color:gray;
        }
    </style>
</head>
<body>
    <h1 title="world">h1 标题 title="world"</h1>
    <h2 title="Hello">h2 可以设置样式</h2>
    <h3 title="Hello Web">h3 可以设置样式</h2>
    <a href="#" title="Hello world">超链接可以设置样式</a>
    <a href="#" lang="zh-TW">超链接可以设置样式</a>
</body>

(7)表单样式:属性选择器在为不带有 class 或 id 的表单设置样式时特别有用。例如:

<head>
    <style>
        input\[type="text"\]{
            width:150px;
            display:block;
            margin-bottom:5px;
            background-color:yellow;
        }
        input\[type="button"\]{
            width:120px;
            margin-top:5px;
            background-color:green;
        }
    </style>
</head>
<body>
    <form name="input" action="demo.php" method="get">
        用户名:<input type="text" name="user" placeholder="请输入登录名">
        昵 称:<input type="text" name="name" placeholder="请输入角色名">
        <input type="button" value="查询">
    </form>
</body>

​ 3 组合选择器:合选择符是包括各种简单选择器的组合方式,组合选择符说明了两个选择器直接的关系。

(8)后代选则器:又称为包含选择器,以空格分隔,子元素选择器只能选择作为某元素子元素的元素。

(9)子元素选择器:子元素选择器只能选择作为某元素子元素的元素,以 > 分隔,子元素选择器只能选择作为某元素子元素的元素。

(10)相邻兄弟选择器:可选择紧接在另一元素后的元素,且二者有相同父元素,以 + 分隔。

(11)普通相邻兄弟选择器:选取所有指定元素的相邻兄弟元素,以 ~ 分隔。

(12)选择器组合:多种选择器可以结合起来使用。

13 CSS伪类(不区分大小写)

CSS 伪类是用来向一些选择器添加特殊的效果。

语法:选择器:伪类{attr:value;}
CSS 类也可以使用伪类:选择器.class:伪类{attr:value;}

​ (1)超链接伪类 在浏览器中,链接的不同状态都可以以不同的方式显示:

a:link{color:#FF0000;}         /* 未访问的链接显示为红色 */
a:visited{color:#00FF00;}      /* 已访问的链接显示为绿色 */
a:hover{color:#FF00FF;}        /* 鼠标划过链接显示为紫红色 */
a:active{color:#0000FF;}       /* 已选中的链接显示为蓝色 */

注意: 在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,a:active 必须被置于 a:hover 之后,才是有效的。

(2)伪类和 CSS 类(伪类可以与 CSS 类配合使用)

(3)CSS2 - :first - child 伪类  

第一个 p 元素

第二个 p 元素

第三个 p 元素

  选择作为任何元素的第一个子元素 p。选择器使用 p:first-child。 选择所有 p 元素中的第一个子元素 b。选择器使用 p>b:first-child。 选择所有作为第一个子元素 p 中的所有 b 元素。选择器使用 p:first-child b。

(4)CSS2 - :lang 伪类 使用 :lang 伪类可以为不同的语言定义特殊的规则: html:lang(zh-CN){   color:blue; } ​ :lang(en)>p{   color:gray; }

14 CSS 伪元素

CSS 伪元素是用来为一些选择器添加特殊的效果。

语法:选择器:伪元素{attr:value;}
CSS 类也可以使用伪元素:选择器.class:伪元素{attr:value;}

(1)CSS2 - :before 伪元素

h1:before{
     content:url(images/logo.gif);
}

(2)CSS2 - :after 伪元素

h1:after{
     content:url(images/logo.gif);
}

content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容,该属性用于定义元素之前或之后放置的生成内容。

content 的内容一般可以为四种: content:none 该值是默认值,不插入内容。

content:"string" 插入文本。

content:attr(属性) 插入标签属性值。

content:url(路径) 使用指定的绝对或相对地址插入一个外部资源,可以是图像,音频,视频或浏览器支持的其他任何资源。

15 块级元素和行内元素

块级元素(block-level):每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。常见的块元素有

~

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
菜园前端 菜园前端
1年前
什么是 CSS?
原文链接:什么是CSS?CSS指层叠样式表(CascadingStyleSheets),理解为CSS样式就可以了。CSS样式有什么作用呢?比如我们在页面中添加了一个div,我想给这个div设置宽度、高度、背景色、阴影、内容字体样式等等,就是通过CSS样式来
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
2年前
Sass
嵌套规则(NestedRules)Sass允许将一套CSS样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器mainp{color:00ff00;width:97%;.redbox{
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
2个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这