day31 CSS

最新推荐文章于 2022-03-13 23:33:03 发布

Fairyta1e

最新推荐文章于 2022-03-13 23:33:03 发布

阅读量82

点赞数

分类专栏：笔记文章标签： css

原文链接：https://blog.csdn.net/changlinke/article/details/114239610

版权

笔记专栏收录该内容

25 篇文章 0 订阅

订阅专栏

本文介绍了CSS的基础知识，包括内部样式表、行内样式表和外部样式表的区别，字体属性、颜色、布局控制以及各类选择器的使用。重点讲解了标签选择器、类选择器和ID选择器，并演示了CSS背景设置和元素显示模式。

摘要由CSDN通过智能技术生成

CSS初识

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

内部样式表

<head>
<style type="text/CSS">
    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>

行内样式表

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

外部样式表

<head>
  <link href="CSS文件的路径"  rel="stylesheet" />
</head>

样式表优点缺点使用情况控制范围
行内样式表书写方便，权重高没有实现样式和结构相分离较少控制一个标签（少）
内部样式表部分结构和样式相分离没有彻底分离较多控制一个页面（中）
外部样式表完全实现结构和样式相分离需要引入最多，强烈推荐控制整个站点（多）

CSS字体属性

font-size:字号大小

在这里插入图片描述

font-family:字体

p{ font-family:"微软雅黑";}

现在网页中普遍使用14px+。
尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
各种字体之间必须使用英文状态下的逗号隔开。
中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;。
尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

Unicode字体
escape() 来测试属于什么字体

font-weight:字体粗细

font-weight属性用于定义字体的粗细，其可用属性值：
normal、bold、bolder、lighter、100~900（100的整数倍）。
小技巧：
数字400等价于normal，而700等价于bold。但是我们更喜欢用数字来表示。

font-style:字体风格

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。
font:综合设置字体样式 (重点)
font属性用于对字体样式进行综合设置，其基本语法格式如下：

选择器{font: font-style  font-weight  font-size/line-height  font-family;}

使用font属性时，必须按上面语法格式中顺序书写，不能更换顺序，各属性以空格隔开。
其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

CSS外观属性

color:文本颜色

color属性用于定义文本的颜色，其取值方式有如下3种：
预定义的颜色值，如red，green，blue等。
十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。
RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。

line-height:行间距

text-align:水平对齐方式
text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：
left：左对齐（默认值）
right：右对齐
center：居中对齐

text-indent:首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。
1em 就是一个字的宽度。如果是汉字的段落，1em就是一个汉字的宽度

text-decoration 文本的装饰

none 默认。定义标准的文本。
underline 定义文本下的一条线。下划线也是我们链接自带的
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。

基础选择器

标签选择器（元素选择器）

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
特点：

标签选择器能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。
标签选择器可以把某一类标签全部选择出来。

类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签调用的时候用class=“类名”即可。
类选择器的优势：
可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签。

多类名选择器

样式显示效果跟HTML元素中的类名先后顺序没有关系,与CSS样式书写的上下顺序有关。
各个类名中间用空格隔开

<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>

id选择器

id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：

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

id选择器好比人的身份证号码，全中国是唯一的，不得重复。
id选择器和类选择器最大的不同在于使用次数上。

通配符选择器

通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

复合选择器

交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。

并集选择器

比如：.one, p, #test{color: #F00;}表示.one和p和#test这三个选择器都会执行颜色为红色。通常用于集体声明。

后代选择器

子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。

ul a{color: red;}

子代选择器

白话：这里的子，指的是亲儿子，不包含孙子、重孙子之类。

ul>a{color: red;}

链接伪类选择器

:link /* 未访问的链接 /
:hover / 鼠标移动到链接上 /
:active / 选定的链接 /
:visited / 已访问的链接 */
注意写的时候，他们的顺序尽量不要颠倒，按照lhav的顺序。

属性选择器

  /* 选择器[属性] : 获取有某个属性的 */
        input[id]{
            color:red;
        }
        /* 选择器[属性='值'] : 获取某个属性的值符合条件的 */
        input[type='button']{
            color: green;
        }
        /* 获取a标签中 href属性值是以http开头的 */
        a[href^='http']{
            color:red;
        }
        /* 获取a标题中href属性值是以.com结尾的 */
        a[href$='.com']{
            color:green;
        }
        a[title]{
            color:pink;
        }

标签显示模式

块状元素

常见的块元素有h1-h6/p/div/ul/li/ol/dl/dd/dt/table/tr/td/caption/form等，其中<div>标签是最典型的块元素。
块级元素的特点：
1、有默认的宽高，宽是父元素的100%，高度是内容所撑起来的高度
2、宽高可以设置
3、独占一行
4、可以容纳任意的元素（h/p元素不能容纳块状元素）
5、可以设置外边距和内边距的。

行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
行内元素的特点：
1、有默认的宽高，宽高是内容所撑起来的
2、宽高设置是无用的
3、相邻的行内元素或者行内块元素在同一行上显示
4、只可以容纳行内元素与内容
5、水平方向上的外边距和内边距可以设置，垂直方向设置无用

1. 只有文字才能组成段落，因此p里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素
2. 链接里面不能再放链接
3. a里面可以放块级元素

行内块元素

在行内元素中有几个特殊的标签——<img />、<input />、<label>、<select>、<option>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
行内块元素的特点：
1、有默认的宽高，是元素本身的宽高
2、宽高是可以设置的
3、相邻的行内元素或者行内块元素在同一行上显示
4、一般不容纳其他元素
5、外边距和内边距都是可以设置的

标签显示模式转换

块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;

CSS 背景(background)

background-color 背景颜色
background-image 背景图片地址
background-repeat 是否平铺
background-position 背景位置
background-attachment 背景固定还是滚动

背景图片

background-image : none | url (url)

参数： none :无背景图（默认的），url :使用绝对或相对地址指定背景图像
background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）。如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。如果有背景图片平铺，则会覆盖背景颜色。

背景平铺

background-repeat : repeat | no-repeat | repeat-x | repeat-y

repeat : 背景图像在纵向和横向上平铺（默认的），no-repeat : 背景图像不平铺，repeat-x : 背景图像在横向上平铺，repeat-y : 背景图像在纵向平铺
设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。

背景位置

background-position : length || length，background-position : position || position

length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位 position : top | center | bottom | left | center | right
说明：设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
注意：position后面是x坐标和y坐标。可以使用方位名词或者精确单位。
如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则15px一定是x坐标top是y坐标。

背景附着

background-attachment : scroll | fixed

参数：scroll : 　背景图像是随对象内容滚动fixed : 　背景图像固定
说明：设置或检索背景图像是随对象内容滚动还是固定的。

背景简写

background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议如下写：
background:背景颜色背景图片地址背景平铺背景滚动背景位置

background: transparent url(image.jpg) repeat-y  scroll 50% 0 ;

Fairyta1e

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day31 CSS

CSS初识CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。内部样式表<head><style type="text/CSS"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head>行内样式表<标签名 style="属性1:属性值1; 属性2:属性值
复制链接

扫一扫

专栏目录