CSS概述、基础语言及运用(2)

1.CSS的概述

CSS指层叠样式表(Cascading Style Sheets)。

2.Css 页面引入的方法:

	(1)行内样式/内联样式:通过标签的 style 属性,在标签上直接写 样式。
	<div style="width:100px; height:100px; color:red "> </div>   
	
	(2)内嵌样式:通过 style 标签在网页上创建嵌入的样式。
	<style type="text/css"> 
	div{
	width:100px; height:100px; color:red
	    } 
	</style>
	
	(3)外联样式:通过 link 标签,链接到外部样式表到页面中。 
	<link rel="stylesheet"  type="text/css" href="xxxx.css">
	通过@import,链接到外部样式表到页面中。
	@import + 空格+ url(CSS文件路径地址);
	<style type="text/css">
         @import url(CSS文件路径地址);
    </style>

link与@import区别与选择
首页link和import语法结构不同,前者是html标签,只能放入html源代码中使用,后者可看作为css样式,作用是引入css样式功能。import在html使用时候需要

本质上两者使用选择区别不大,但为了软件中编辑布局网页html代码,一般使用link较多,也推荐使用link。

注:
三种引入方法的优先级:
<1>第一是行内样式/内联样式
<2>第二是内嵌样式
<3>第三是外联样式
最高优先级, 超越上述所有, !important
如 background-color: #000 !important;

外联样式的优点:
①可以在多个文档间共享样式表,对于较大规模的网站,将CSS样式定义独立成一个一个的文档,可有效地提高效率,并有利于对网站风格的维护。
②可以改变样式表,而无需更改HTML文档,这也与HTML语言内容与形式分开的原则相一致。
③可以根据介质有选择的加载样式表。
(所以在企业一般采用外联样式)

3.CSS的基本语法

CSS的定义方法是: 选择器 { 属性: 值 ; 属性: 值;}
选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个值。

代码示例:div{width:100px; height:100px; color:red}

选择器(六种)
(1)html标签选择器:标签选择器,此种选择器影响范围大,建议尽量应用在层级选择器中。
语法格式-------------》选择器{}
(2)ID选择器:通过 id 名来选择元素,元素的 id 名称不能重复,所以一个样式设置项只能对应于页面上一个元素,不能复用,id 名一般给程序使用,所以不推荐使用 id作为选择器。
语法格式-------------》#+id名称{}
(3)class类选择器:通过类名来选择元素,一个类可应用于多个元素,一个元素上也可以使用多个类,应用灵活,可复用,是 css 中应用最多的一种选择器。
语法格式-------------》.+class名称{}
(4)匹配后代元素选择器:是层级选择器的一种,主要应用在选择父元素下的子元素,或者子元素下面的子元素,可与标签元素结合使用,减少命名,同时也可以通过层级,防止命名冲突。
语法格式-------------》选择器 选择器{}
--------匹配子元素选择器:也是层级选择器的一种,主要应用在选择父元素下的子元素,或者子元素下面的子元素,可与标签元素结合使用,减少命名,同时也可以通过层级,防止命名冲突。
语法格式-------------》选择器>选择器{}
(5)伪类选择器:常用的伪类选择器有 hover,表示鼠标悬浮在元素上时的状态。
语法格式-------------》选择器:hover{} 注:(一般针对超链接)
--------伪元素选择器:伪元素选择器有 before 和 after,它们可以通过样式在元素中插入内容。
语法格式-------------》选择器:after{}
(6)组合元素选择器:多个选择器,如果有同样的样式设置,可以使用组选择器。
语法格式-------------》选择器,选择器{}

4.CSS样式

(1)常用的应用文本的css样式:

	color 
	设置文字的颜色,如: color:red;
	
	font-size 
	设置文字的大小,如:font-size:12px;
	
	font-family 
	设置文字的字体,如:font-family:'微软雅黑';
	
	font-style 
	设置字体是否倾斜; 设置不倾斜,font-style:'normal';设置文字倾斜,font-style:'italic'; 
	
	font-weight 
	设置文字是否加粗,如:font-weight:bold 设置 加粗      font-weight:normal 设置不加粗
	
	font 
	同时设置文字的几个属性,写的顺序有兼容问题,建议按 照如下顺序写: font:是否加粗 字号/行高 字体;如: font:normal 12px/36px '微软雅黑'; 
    
    line-height 
    设置文字的行高,如:line-height:24px; 
    
    text-decoration 
    设置文字的下划线,如:textdecoration:none; 将文字下划线去掉
    
    text-indent 
    设置文字首行缩进,如:text-indent:24px; 设置文字首行缩进24px 
    
    text-align 
    设置文字水平对齐方式,如text-align:center 设置文字水平居中 

(2)常用的背景的CSS样式:

        background-color 设置背景颜色
		background-image 设置背景图片地址 
		background-repeat 设置背景图片如何重复平铺
		background-position 设置背景图片的位置 
		background-attachment 设置背景图片是固定还是随着页面滚动条滚动 

(3)颜色的表示方法:

颜色名表示,比如:red 红色,gold 金色
rgb 表示,比如:rgb(255,0,0)表示红色
16进制数值表示,比如:#ff0000 表示红色,这种可以简写成#f00

(4)CSS列表、表格

《1》列表:
CSS列表属性允许你放置、改变列表项标志,或者将图像作为列表项标志。
list-style------------------》简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image---------》将图像设置为列表项标志。
list-style-position-------》设置列表中列表项标志的位置。
list-style-type------------》设置列表项标志的类型。

《2》表格
border-collapse---------》设置是否把表格边框合并为单一的边框。
border-spacing----------》设置分隔单元格的距离。
caption-side--------------》设置表格标题的位置。
empty-cells---------------》设置是否显示表格中的空单元格。
table-layout---------------》设置显示单元、行和列的算法。

5.CSS轮廓
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘
的外围,可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。
outline----------------------》在一个声明中设置所有的轮廓属性。
outline-color--------------》设置轮廓的颜色。
outline-style--------------》设置轮廓的样式。
outline-width-------------》设置轮廓的宽度。

<div style="width:200px;height:50px;border:1px solid red;
outline:dashed #00ff00 thick;">
</div>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值