网页设计与制作的期末复习-css部分

最新推荐文章于 2022-07-12 11:05:24 发布

眠秋雨

最新推荐文章于 2022-07-12 11:05:24 发布

阅读量675

点赞数 2

分类专栏： Before 文章标签： css html vue.js css3

本文链接：https://blog.csdn.net/weixin_45921593/article/details/106746274

版权

Before 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.CSS层叠样式表

注释：/*  */

2.继承

继承是CSS的一个主要特征，许多CSS属性不但影响选择符所定义的元素，而且会被这些元素的后代继承。例如一个body定义了的颜色值也会应用到段落的文本中。

<html>
    <head><title>CSS的继承性</title>
    <style type="text/css">
        <!-- body{color:red;} -->
    </style>
    </head>
<body>
    <p>CSS的继承性</p>
</body>
</html>

嵌入外部演示表

<style type="text/css">
@import url("外部样式表的文件名称");
</style>
语法说明：
import语句后的“;”号，一定要加上！
@import应该放在style元素的任何其他样式规则前面。
例如：@import url("style.css")；

链接外部样式表

–

选择元素

“.news{color:red;}”会影响所有标记中定义了“class="news"”类的元素
“h1.news{color:red;}”只影响属性中定义了“class="news"”类的h1元素。

#000是黑色 #FFF是白色（三个颜色和谐了）

<!--程序8-7-->
<html><head><title>ID和类的定义</title>
    <style type="text/css">
    <!--
        #divdemo{background-color:#90EE90 ;border:0.2cm groove orange;}
        .p1 {font-size:16px; color:#FF0000;}
        p.p2{font-size:26px; color:#FF0066;}
    -->
    </style> </head><body>
         <p>此段文字以默认方式显示</p>
        <p class="p1">此段文字以16像素大小，红色字体显示</p>
 <div id="divdemo">	
        <p class="p2">此段文字以26像素大小，玫红色字体显示
    </div></body></html>

按照上下文选择元素

在CSS中，可以根据元素的祖先元素、父元素或同胞元素来定位它们。
祖先元素：就是包含所关心元素（希望样式影响的元素）的任何元素
父元素：就是直接包含所关心元素的元素。
这么说的话父元素也是祖先元素咯

基本语法：
祖先元素 [祖先元素…] 显示元素{属性名:属性值;…}.
语法说明：
祖先元素是希望格式化的元素的祖先元素的名称，上面程序中是“#divdemo”；
如果还需要继续指定后续的祖先元素，则元素名中加空格；
最后是最终希望格式化影响的元素名，上面程序中指定了影响段落标记P，也可以是前面讲过的一个ID（#p1）或者CLASS（.p1)，例如： 
#divdemo #p1{font-size:26px; color:#FF0066;}
#divdemo .p1{font-size:26px; color:#FF0066;}

如果祖先元素和影响元素是父子关系，则可采取下面的定义风格：
#divdemo >p{font-size:26px; color:#FF0066;}

多个元素使用同样的样式规则，可以组合使用选择器。
h1,h2,div{color:#FF0066;}

此段文字以26px大小，玫瑰红色字体显示
上面这段文字是p标签同时也是属于class=p2
那么在定义CSS的时候可以定义为p.p2{.................}
其中p与.p2之间无空格

而对于它的祖先元素divdemo
因为他们的关系存在祖先关系
那么，在定义CSS的时候可以这样：
#divdemo>.p2{
	font-size:26px;
	color:#ff0066;
}
在divdemo与.p2之间可以用空格隔开，或者用>链接，代表他们是父子关系。

长度与百分比单位

不管使用哪种单位，在设置的时候，数值与单位间不需要加上空格。

font-family****设置字体：–font-family:字体一，字体二，字体三… 默认字体为宋体。

font-size****设置字号

**font-style****设置字体样式：–font-style:normal | italic | oblique

–normal为默认值，italic为斜体效果，oblique为歪斜体效果。

font-weight****设置字体加粗：–font-weight：normal | blod | bolder | lighter | 100-900

–normal表示默认字体，bold表示粗体，bolder表示粗体再加粗，lighter表示比默认字体还细，100-900共分为九个层次（100、200……、900），数字越小字体越细、数字越大字体越粗。

font-variant****设置字体变体：–font-variant:normal | small-caps

–normal表示默认值，small-caps表示英文字体显示为小型的大写字母。

text-decoration****设置文字效果属性：–text-decoration：underline | overline | line-through | blink | none

font****设置综合字体属性:–font: font-style font-weight font-variant font-size/line-height font-family

–如果要利用font属性，同时设置多个文字属性时，属性与属性之间必须利用空格隔开；

–前三个属性次序不定或者省略，默认为normal；

–大小和字体系列必须显式地指定，先设置大小，再设置字体系列，字体系列如果有多个，以逗号分割；

–行高必须直接出现在字体大小后面，中间用斜杠分开，行高是可选的属性；

排版样式属性

text-indent
首行缩进属性text-indent首行缩进属性，通常被用来指定一个段落，第一行文字缩进的距离。
letter-spacing字符间距属性letter-spacing：normal | 长度单位normal表示默认值，此处的长度单位可使用负数 
line-height行距属性  line-height：normal | 比例 | 长度单位 | 百分比
text-align水平对齐属性  text-align属性可以控制文字段落的水平对齐方式。text-align：left | right | center | justify
text-transform转换英文大小写
text-transform：uppercase | lowercase | capitalize | none语法说明：
uppercase表示使所有单词的字母都大写，lowercase表示使所有单词的字母都小写，capitalize表示使每个单词的首字母大写，none表示默认值。

背景与颜色的使用

利用RGB设置颜色
利用RGB函数设置颜色   RGB(R，G，B)
利用颜色名称设置颜色

背景颜色的设置
background-color：关键字 |  RGB值 | transparent（默认值）

背景图片的属性

background-image插入背景图片
background-attachment插入背景附件
background-attachment背景附件属性是用来设置背景图片是否随着滚动条的移动而一起移动。
background-attachment：scroll | fixed
scroll表示背景图片是随着滚动条的移动而移动，是浏览器的默认值；fixed表示背景图片固定在页面上不动，不随着滚动条的移动而移动。
background-repeat设置重复背景图片repeat表示背景图片在水平和垂直方向平铺，是默认值；repeat-x表示背景图片在水平方向平铺；repeat-y表示背景图片在垂直方向平铺；no-repeat表示背景图片不平铺。
background-repeat：repeat | repeat-x | repeat-y | no-repeat
background-position设置背景图片位置
当在网页中插入背景图片时，每一次插入的位置，都是位于网页的左上角，所以通过background-position属性来改变图片的插入位置
background-position：百分比 | 长度 | 关键字
利用百分比和长度来设置图片位置时，都要指定两个值，并且这两个值都要用空格隔开。一个代表水平位置，一个代表垂直位置。水平位置的参考点是网页页面的左边，垂直位置的参考点是网页页面的上边。关键字在水平方向的主要有left、center、right，关键字在垂直方向的主要有top、center、bottom。水平方向和垂直方向相互搭配使用。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RiFumXiX-1592118315151)(C:\Users\刘志昊\AppData\Roaming\Typora\typora-user-images\image-20200614145328205.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w1ZnGLxz-1592118315154)(C:\Users\刘志昊\AppData\Roaming\Typora\typora-user-images\image-20200614145413558.png)]

设置元素边框

border-style边框样式属性
border-width边框宽度属性

thin、medium、thick分别表示细、中等、粗，

border-color边框色彩属性

border-color:颜色关键字 | RGB值 
border-top- color: 颜色关键字 | RGB值 
border-bottom- color: 颜色关键字 | RGB值
border-left- color: 颜色关键字 | RGB值
border-right- color: 颜色关键字 | RGB值

border属性的综合设置

border:边框宽度 | 边框样式 | 边框颜色

设置一个值：四条边框宽度均使用一个值。
设置两个值：上边框和下边框宽度调用第一个值，左边框和右边框宽度调用第二个值。
设置三个值：上边框宽度调用第一个值，右边框与左边框宽度调用第二个值，下边框调用第三个值。
设置四个值：四条边框宽度的调用顺序为上、右、下、左。

-left- color: 颜色关键字 | RGB值
border-right- color: 颜色关键字 | RGB值

border属性的综合设置

border:边框宽度 | 边框样式 | 边框颜色

设置一个值：四条边框宽度均使用一个值。
设置两个值：上边框和下边框宽度调用第一个值，左边框和右边框宽度调用第二个值。
设置三个值：上边框宽度调用第一个值，右边框与左边框宽度调用第二个值，下边框调用第三个值。
设置四个值：四条边框宽度的调用顺序为上、右、下、左。

眠秋雨

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
网页设计与制作的期末复习-css部分

1.CSS层叠样式表注释：/* */2.继承继承是CSS的一个主要特征，许多CSS属性不但影响选择符所定义的元素，而且会被这些元素的后代继承。例如一个body定义了的颜色值也会应用到段落的文本中。<html> <head><title>CSS的继承性</title> <style type="text/css">  </s.
复制链接

扫一扫