《CSS基础学习》

最新推荐文章于 2024-07-05 16:13:36 发布

pa_miao_chi

最新推荐文章于 2024-07-05 16:13:36 发布

阅读量366

点赞数

分类专栏：语言学习文章标签： css 学习前端

本文链接：https://blog.csdn.net/chenjieyujiayou/article/details/127781621

版权

语言学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

学习来源：书籍《Head First HTML 与 CSS》

Q:如何为元素设置样式属性？

选择需要增加样式的元素
把所有样式写到大括号里面
指定你想要的样式的属性
在属性和相应的值之间有个冒号
最后加上一个分号
整个称为一个规则

p {
    background-color:red;
}

Q:如何增加多个样式属性？

p {
    background-color:red;
    border: 1px solid gray;
}

Q：如何将CSS放入HTML?

在<head>元素中增加开始和结束style标记，你的css规则要放在这里

<head>
<style>
 /* css样式 */
</style>
</head>

Q：如果两个规则是一样的，就可以进行样式合并，元素之间用逗号隔开

h1,h2 {
   font-family:sans-serif;
   color:gray; 
}

Q：如何对合并规则的元素加新的规则

一个元素可以有多个规则，可以根据需要来指定
每个规则都会在现有的样式信息中增加新的样式信息
一般把所有共同样式组在一起，然后把一个元素特定的样式写在另一个规则中

h1,h2 {
   font-family:sans-serif;
   color:gray; 
}

h1 {
   border-bottom: 1px solid black;
}

Q：选择器的概念

h1 h2 叫做选择器，css允许指定各种选择器，来确定将样式应用到哪些元素

h1,h2 {
   font-family:sans-serif;
   color:gray; 
}

h1 {
   border-bottom: 1px solid black;
}

Q：如何链接外部的样式表

不需要使用style元素，直接使用link元素将外部的样式表链接进来
rel属性指定了HTML文件与所链接的文件之间的关系，要链接到一个样式表，所以使用"stylesheet"
样式表放到href中

<link type="text/css" rel="stylesheet" href="lounge.css">

Q：样式会继承

元素会从他们的父元素继承样式
如果希望为一个元素提供一个特定的属性，就为它增加一个新的规则，这个规则会覆盖父元素的规则

Q：CSS中的注释

/* */ ：注释可以跨行

Q：CSS中的类

可以定义一类元素，并对属于该类的所有元素应用样式

<p class="greentea">

类选择器

p 就是这个类中的元素，再用.指定一个类，greentea是类名
p.greentea 会选择greentea中的所有段落
如果希望greentea类中的所有元素都有同一种样式，就直接用.greentea
元素可以加多个类，把各个类名放在class属性中，各个类名之间用一个空格分隔，类名的顺序无影响

/*类选择器*/

p.greentea {
    color:green;
}

/* 省略元素名，只有一个点，后面是类名，这个规则将会应用到这个类的所有成员   */
.greentea {
    color:green;
}

<!-- 如果你希望一个元素拥有不同的类中定义的不同样式，就要使用多个类  -->
<p class="greentea respberry blueberry"></p>

如果有多个选择器与这个元素匹配，CSS会选择最后列出的规则
如果css有错误，这个错误以下的所有规则都会被忽略

Q：CSS验证工具的网站

http：//jigsaw.w3.org/css-validator/

Q：CSS属性汇总

color: 字体颜色 font-weight:文本粗体

left:可以指定左边所在位置 line-height: 行间距

top:控制元素顶部的位置 text-align：文本对齐方式

letter-spacing:在字母之间设置间距 background-color:背景颜色

border:边框 padding:内边距：表示一个元素边缘和它的内容之间有空间

font-style:斜体 list-style:改变列表项的外观

background-image:指定背景图片

Q：字体相关属性

font-family

font-family：使用该属性可以指定多个字体，只要输入这些字体名，并用逗号隔开，大小写必须一致，通常会指定一个候选字体列表，最后一个放通用的字体
浏览器会查看是否有Verdana字体，如果有，就使用这个字体，如果没有，就查找下一个字体是否可用
如果字体中包含空格，则需要用双引号引起来
可以使用@font-face规则，这个规则允许你定义一种字体的名字和位置，然后可以在你的界面上使用

body{
   font-family:Verdana, Geneva, Arial, sans-serif;
}

font-size:

三种指定字体大小的方法：

① px : 可以按照像素指定字体大小，用像素指定字体大小时，就是在告诉浏览器字母的高度是多少像素； px必须紧跟在数字的后面，之间不能有空格

② %：相对于父元素字体大小的百分比

③ em：倍数 1.2em代表的是1.2倍

④ 关键字：xx-small small medium large x-large xx-large 浏览器会将这些关键字转换为像素值，会使用浏览器中的默认值来完成这个转换

font-weight:

bold：加粗
normal:去掉加粗样式

font-style:

增加斜体文本：italic(斜体风格) oblique(倾斜文本)

color:

指定字体颜色

Q：如何为页面增加Web字体： @font-face 的使用

找到一个字体：访问一些提供字体的网站
确保所需字体的所有格式：.ttf(TrueeType字体) .otf(OpenType字体) .eot (Embedded OpenType字体) SVG字体（.svg） Web开放字体格式（.woff 最广泛）
把你的字体文件放到Web上，这样用户的浏览器就可以访问这些字体，或者可以利用网上的很多在线字体服务
在css中增加@font-face属性,放在body的规则之上
使用这个字体

@font-face{
  font-family: "Emblema One";
  src:url("http//XXXX.woff");
  src:url("http//XXX.ttf");
}

Q： @font-face 内置的CSS规则

@font-face并不是一个选择器规则，而是一个内置的CSS规则
两个常用的内置规则: @import 允许导入其他CSS文件 @media 允许创建特定于某些“媒体”类型的CSS规则

Q：如何指定Web颜色

① 按名字指定颜色： background-color: silver; CSS颜色名不区分大小写

② 按照红，绿，蓝的分量指定一个颜色

使用百分比，百分比是相对于255来计算的 background-color:rgb(80%, 40%, 0%);
也可以直接输入数值：background-color:rgb(204, 102, 0);

③十六进制：#cc6600 ：每两位数字分别表示红，绿，蓝分量，将两位数字转化为16进制对应的数值，代表的就是红，绿，蓝分量；有些可能会对16进制码进行简写，#cb0代表的是#c60

Q：如何为文本增加装饰效果

设置元素的text-decoration属性：line-through（从文本中间穿过的横线） underline（下划线） overline(上划线)
使用none，将去除装饰
如果元素有两个规则，规则不会累加，如果需要两个规则，就将这两个规则在同一个声明中指定

Q：盒子模型

内容区 content area: 内容区包含元素的内容
内边距：padding：在内容的边缘会有一层内边距，可以在内容与盒子边框之间建立可以看到的空间
边框：border：边框会包围内边距和内容
外边距：margin：包围着边框，可以在同一个页面上的不同元素之间增加空间
内边距和外边距的使用：如果需要在内容区本身周围有更大的可见空间，就要使用内边距，如果希望元素与页面边缘或者其他元素之间有更大空间，这种情况就使用外边距

Q：设置元素背景相关属性

background-img:url(images/background.gif);
background-repeat:no-repeat; /*图像背景不重复 no-repeat repeat-x repeat-y inherit(按父元素的设置处理)*/
background-position:指定图像位置

Q：边框样式

border-style:
solid （实线） dotted(虚点线) double(两条线)
dashed(破折线) groove(槽线) inset(内凹)
outset(外凹) ridge(脊线)

Q：边框宽度，颜色以及圆角

border-width:thin； /*关键字指定 thin medium thick*/
border-width:5px；/*数值指定*/
border-color:red; /*颜色可以用名字，rgb数值或者百分比，十六进制颜色值*/
也可以指定某一个边框的颜色或者样式 border-top-color
border-radius: 15px；/*可以指定四个角，也可以指定某一个角，可以使用px或者em来指定边框半径大小，如果使用em,边框半径的度量相对于元素的字体大小*/

Q：id属性

id是唯一的，每个元素只能有一个id
id名中不允许出现空格或者其他特殊字符
id与类不冲突的，id是元素的唯一标识符，但是它可以属于一个或者多个类

Q：使用id选择一个元素与使用类选择一个元素的对比

按id选择一个元素，需要在id前面使用一个#
按类选择时，需要在类前面使用一个.
id选择器只与页面中的一个元素匹配

/*只会选择specials类中的段落*/
p.specials{
   color:red;
}

/*会选择specials 类中的所有元素*/
.specials{
   color:red;
}

/*选择id为footer的任意元素*/
#footer{
   color:red;
}

/*选择id为footer的<p>元素*/
p#footer{
   color:red;
}

Q：类和id的命名规则

类名要以一个字母开头，不过id名可以以一个数字或者字母开头
id和类名都可以包含数字，字母和_ 但是不能有空格
id必须是唯一的

Q：关于样式表

如果要使用多个样式表，最后链接的样式表的样式最优先

Q：如何在css中增加媒体查询

通过link指定media

链接不同的css文件的目的：可能想针对将要显示页面的设备类型（桌面PC, 笔记本电脑，平板电脑，手机或者页面的印刷版本）来调整样式，可以在link的时候指定media属性
media 属性允许你指定应用这个样式表的设备类型，指定了这个设备类型，当媒体类型为这种类型时，才会使用这个样式表
只包含特定于一种媒体类型的CSS规则

<link type="text/css" rel="stylesheet" media="screen and(max-device-width: 480px)">

还可以直接在css中写出来

@media screen and (min-device-width: 481px) {
    #guarantee{
     margin:200px;
   }
}

Q：div和span

<div></div> :块元素

<span></span>: 创建内联字符和元素的逻辑分组

Q：width属性与内边距和外边距有什么关系

width属性只指定内容区的宽度

Q：设置边距、边框、背景的快捷方式

padding：0px 20px 30px 10px; /*顺序为顺时针：上右下左*/
padding: 20px; /*指定一个数值，说明盒子四周都是20px*/
padding: 0px 20px; /*上和下一样左和右一样*/
border: solid thin #007e7e /*顺序可以自己指定*/
background: white url(images/XX.gif) repeat-x; /*顺序可以自己指定*/

Q：CSS伪类

伪类：可以为这些类设置样式，但是在HTML里面没有真正输入这些伪类

应用场景：为元素设置不同的状态

举个例子：超链接（未访问已访问悬停状态）

a:link {
   color:green;
}

a:visited {
   color:red;
}

a:hover {
   color:yellow;
}

pa_miao_chi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《CSS基础学习》

CSS基础学习(1)
复制链接

扫一扫

专栏目录

《CSS基础学习》

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