这篇博客详细介绍了CSS的基础语法，包括选择器的使用、颜色表示法、背景样式、边框样式、文字样式和段落样式。内容涵盖从内联样式到外部样式表的引入，以及颜色的单词表示、十六进制和RGB表示。此外，还讨论了背景颜色、图片、位置和附件，边框的样式、宽度、颜色，以及文字的字体、大小、颜色和装饰。段落样式中提到了文本装饰、大小写转换、缩进和对齐方式。最后，文章讲解了复合样式和选择器的运用，如ID选择器、类选择器和标签选择器。
CSS基础语法
- 格式：选择器{属性1: 值1; 属性2: 值2; …}
- 基本样式(属性)
- width:宽
- height:长
- background-coclor:背景色
- 长度单位:
- px:像素
- %:百分比
比喻:外容器(电脑屏幕)=400px 当前容器50%=200px
外容器(电脑屏幕)=600px 当前容器50%=300px
- CSS注释：/* 注释的内容 */
快捷键：Ctrl + /； Shift + Al
CSS样式的引入方式
- 1.内联（行内、行间）样式
在html标签上添加style属性来实现 - 图例
<div style="width: 100px; height: 100px; background-color: aquamarine;">jjj</div>
- 2.内部样式
在< style>标签内添加的样式，< style>< /style> 一般写在head部分
优点：内部样式的代码可以复用(其他相同标签也可以使用)，符合W3C的规范标准：尽量让结构和样式分开处理 - 3.外部样式
- 引入一个单独的CSS文件，name.css
- 引入方法：
- 通过link标签引入外部资源，rel属性指定资源和页面的关系，href属性指定资源的地址，< link> 标签只能存在于head部分，可以出现多次
<link rel="stylesheet" href="***.css">
- 通过 @import方式引入，这种方式有很多问题，不建议使用
<style>
@import url('***.css');
</style>
CSS中的颜色表示法
- 单词表示法
- 十六进制表示法：#000000 #ffffff
- RGB三原色表示法：rgb(数1，数2，数3)[rgba(附加透明色) ]
取值范围:0~255
html颜色代码 - 获取颜色的工具(可以提取指定的颜色)
1.提取颜色下载地址:https://www.baidufe.com/
2.photoshop工具
(一个简单的获取颜色的方法：登录QQ，使用Ctrl + Alt + a截屏的时候会显示颜色的值)
CSS背景样式
1.background-color：背景颜色
2.background-image：背景图片
- 展示性的图片通常用< img>，装饰性的图片（比如做一个小图标、背景等）用background-image
- 使用时要为该属性设置一个URL值：url(背景地址)
- 默认会水平和垂直方向都铺满背景图
3.background-repeat：背景图片的平铺方式
- repeat-x：x轴平铺
- repeat-y：y轴平铺
- repeat：x、y都进行平铺，默认值
- no-repeat：都不平铺，不平铺时，若图片大小小于背景大小，则图片默认会在背景的左上角
4.ackground-position：背景图片的位置
支持的单位：
- x、y：背景左上角坐标为（0px,0px），x和y的值可正可负
- 单词：x轴有left、center、right(左中右)；y轴有top、center、bottom(上中下)
- 百分比
5.background-attachment： 背景图片随滚动条的移动方式
- 有两个可选值：
- scroll：默认值，默认情况下，背景会随滚动条滚动，当滚动到超过图像的位置时，图像就会消失。（采用默认值时，背景的位置background-position是按照当前元素进行偏移的）
- fixed：背景图片固定不动，但容器会随滚动条移动（背景的位置是按照浏览器进行偏移的）
- 写法
<style>
div {width:300px;height:300px;
background-color: red;
background-image: url(图片地址);
background-repeat: no-repeat;
background-position:50% 50%或100px 100px或left top;
background-attachment: fixed;}
</style>
CSS边框样式
- border-style：边框样式
- 取值：solid（实线） | dashed（虚线） | dotted（点线）
- border-width：边框大小
- 取值：px…
- border-color：边框颜色，可以设置透明颜色transparent
- 取值:颜色表示法
- 也可以针对某一条边框进行单独设置：
例如border-right-style、border-top-color、border-left-width，即在中间加上一个表示方向的单词。left、right；top、bottom（左右上下）
CSS文字样式
- font-family：字体类型
- 英文字体：Arial、‘Times New Roman’…（英文字体只针对英文，中文不会有任何改变）
- 中文字体：宋体、微软雅黑（默认）…（中文字体也能对英语进行识别）
- 中文字体的英文名称
- 宋体 ：SimSun
- 微软雅黑： 'Microsoft YaHei ’
- 中文字体的英文名称
<style>
#p1{font-family: 宋体 微软雅黑;}
#p2{font-family: 'Courier New', Courier, monospace;}
</style>
【注】
• 可以设置多个字体类型
多个字体类型的设置目的：作为备选方案，即当用户计算机中没有第一种字体的时候，会显示为设置的第二个类型,如果电脑没有设置的字体,就会按照电脑的默认字体显示。(看电脑支持识别哪种字体?打开电脑搜索控制面板右上角有一个查看方式,选择大图标,然后打开字体,里面有电脑支持的所有字体)
• 引号的添加的目的：
当字体名中有一个或多个空格，或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。(如‘Times New Roman’)
- font-size：字体大小
• 默认大小是16px
• 写法：可以直接具体写**px（为了更好地实现对齐，字体大小一般设置为偶数），也可以通过单词的方式进行设置（但不建议） - font-weight：字体粗细
- 只有两种显示效果，正常和加粗。有两种写法：
- 单词：normal（默认）、bold
- 数字：100~ 900之间的成百的整数，100~ 500效果为normal，600~900效果为bold
- 只有两种显示效果，正常和加粗。有两种写法：
- font-style：字体样式
normal（正常）、italic（斜体）
【注】oblique也是表示斜体，用的比较少。
两个斜体的区别：italic 带有倾斜属性的字体才可以设置倾斜操作；
oblique 没有倾斜属性的字体也可以设置倾斜操作。
所以italic比较符合规范。 - color：字体颜色
CSS段落样式
- text-decoration：文本装饰
• 下划线：underline
• 删除线：line-through
• 上划线：overline
• 不添加任何装饰：none
可添加多个文本修饰，多个修饰之间用空格隔开。 - text-transform：文本大小写（针对英文）
• 小写：lowercase
• 大写：uppercase
• 只针对每个单词的首字母大写：capitalize - text-indent：文本缩进
- 主要针对首行缩进
- em单位：是一个相对单位，1em永远都和字体大小（font-size）相同。但如果一段文字中出现了英文，字体仍然比较难对齐。
- ext-align：文本对齐方式
left(左对齐)、right(右对齐)、center(居中对齐)、justify（两端点对齐） - line-height：定义行高
- 默认行高：不是固定值，而是根据当前字体的大小不断变化的
- 取值：***px（像素）；***（比例值，和文字大小成比例）(比例值直接输入数字就好，不需要添加任何符号)
- letter-spacing ：定义字之间的间距
- word-spacing：定义词之间的间距（针对英文）
- 强制折行（针对英文、阿拉伯数字）(当单词过长，段落不能自动折行可以设置)
• word-break: break-all; 非常强烈的折行
•word-wrap: break-word; 不是那么强烈的折行，可能会产生一些空白的区域
CSS复合样式
一个CSS属性只控制一种样式，叫做单一样式。
一个CSS属性控制多种样式，叫做复合样式。
- 复合样式的写法是通过空格对多个属性进行分割，有些复合写法不需要关心顺序，例如background和border，有的需要关心顺序，例如font。
- 单一样式与复合样式尽量不要混写，如果非要混写，那么一定要先写复合样式，再写单一样式。因为在复合样式里没有写的样式会按照默认样式进行设置，所以要后写单一模式把之前复合里默认的样式覆盖掉。
1.background(背景)
<style>
div{
width: 500px;
height: 200px;
background: aquamarine no-repeat url(...) center center;
}
</style>
2.border(边框)
<style>
div{
width: 100px;
height: 100px;
border: 2px black solid;
}
</style>
只针对一条边框(直接在开头增加方向)
<style>
div{
width: 100px;
height: 100px;
border-right: 2px black solid;
}
</style>
3.font(文字样式)
- 如果要写font，至少要保证有两个值：size family（并且按顺序）
- color不属于font系列，不能添加到font的复合写法中。
- 其中 size 和 family 是必须的，且必须按照顺序放在最后
<style>
div{
font: bold italic 30px/40px 宋体;
/* weight style size/line-height family */
}
</style>
weight style size family（√）
style weight size family（√）
style weight size/line-height family(√)
weight size family style（×）
CSS选择器
1.ID选择器
css：#elem{}
html：id=”elem”
<style>
#div1{}
#div2{}
</style>
<div id="div1"></div>
<div id="div2"></div>
- 在一个页面中，id值是唯一的(虽然设置两个或者多个id一样的也可以运行，但这不符合规范)
- 命名规范：字母 _ - 数字组合而成，并且第一位不能是数字(字母、下划线、中划线、数字命名，如果第一个是数字则会显示错误，并且在页面上全部属性不会显示爸爸在做。啊！啊！三天。别理解，报销二出来。了解一下。然后先来。不过最好)
- 命名方式：驼峰写法：searchButton(小驼峰) SearchButton(大驼峰)searchSmallButton、下划线写法：search_small_button、短线写法：search-small-button
- CSS常用命名名称
2.class选择器
css：.elem{}
html：class=”elem”（值可以随便写，只要和css相同就好）
<style>
.eiem{background:red}
.box{background:blue} 这个优先显示
</style>
<div ciass="box elem "></div> 不会按照这个优先显示
<div ciass="elem"></div>
<p ciass="elem"></p>
- class选择器是可以复用的(class选择器HTML可以设置多个相同的值,而CSS只要是设置一个都能让他们全部生效)
- 可以添加多个class样式(CSS可以设置多个标签(class选择器)，HTML只需要在标签里面增加空格写下对应的值就能生效)
- 多个标签的时候，样式的优先级根据CSS决定，而不是class属性中的顺序(如果有两个标签分别写下颜色红，还有颜色蓝那么他们将CSS由最后一个显示,而不是按照HTML里面的值显示)
- 标签+类名的写法
<style>
.eiem{background:red}
p.box{background:blue} 这样只会针对p标签中带有box值的生效
</style>
<div ciass=" elem "></div>
<div ciass="elem"></div>
<p ciass="elem box"></p>
3.标签选择器（TAG选择器）
css：div{ }
html：< div>
- 使用的场景：
- 去掉某些标签的默认样式时
- 复杂的选择器中，如层次选择器
4.群组选择器（分组选择器）
可以通过逗号的方式，给多个不同的选择器添加统一的css样式，来达到代码的复用
<style>
div,#text,.title{background: red}
</style>
<div></div>
<p id="text"></p>
<h2 elass="title"></h2>
5.通配选择器
*{ } (会给全部标签添加样式,如div,p,ul,li,h1,h2…)
因为会给所有标签添加样式，所以要慎用
- 使用的场景：
- 去掉所有标签的默认样式时
扫一扫
713
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
