css样式

css样式

内部样式

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

行内式

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

外部样式表

	<head>
		<link href="css文件的路径" type="text/css" rel="stylesheet"/>
	</head>

三种样式表总结

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

标签显示模式(display)

为了更好的适应环境而完成的自然选择

块级元素(block-level)

	<h1>~<h6><p><div><ul><ol><li>  其中<div>标签是最典型的块元素

特点:
1. 总是从新行开始
2. 高度、行高、外边距及内边距都可以控制
3. 高度默认是容器的100%
4. 可以容纳内联元素和其他块元素

行内元素(inline-level)

	<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span> 其中<span>标签最典型的行内元素

特点:
1. 和相邻行内元素在一行上。
2. 高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效
3. 默认宽度就是它本身内容的宽度
4. 行内元素只能容纳文本或则其他行内元素

块级元素和行内元素区别

块级元素特点:
1. 总是从新行开始
2. 高度、行高、外边距及内边距都可以控制
3. 高度默认是容器的100%
4. 可以容纳内联元素和其他块元素

行内元素特点:
1. 和相邻行内元素在一行上。
2. 高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效
3. 默认宽度就是它本身内容的宽度
4. 行内元素只能容纳文本或则其他行内元素

标签显示模式转换display

快转行内:display:iniline
行内转块:display:block
块、行内元素转换为行内块:display:inline-block
此阶段,我们只需关心这三个,其他的是我们后面的工作

css复合选择器

复合选择器是有两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签

交集选择器

交集选择器是 并且的意思 即…又…的意思

	p.one 选择的是:类名为.one的段落标签

并集选择器

并集选择器 和 的意思, 就是说,只要逗号隔开的 所以选择器都会执行后面的样式

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

后代选择器

他能选择任何包含在内的标签

	.class h3{color:red;font-size:25px}

子元素选择器

子元素选择器是指选择符合条件的子元素,需要运用到>符号,下面通过实例来看一下:

.class > p{
				color: green;
				background-color: orange;
			}

属性选择器

选取标签带有某些特殊属性的选择器 我们称为属性选择器

 div[class^=font]{ /*  class^=font 表示 font 开始位置就行了 */
            color: red;
        }
        div[class$=footer]{ /*  class$=footer 表示 footer 结束位置就行了 */
            font-size: 30px;
        }

        div[class*=tao]{  /* class*=tao  *=  表示tao 在任意位置都可以 */
            color: aqua;
        }

<div class="font12">属性选择器</div>
    <div class="font12">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="24font">属性选择器123</div>
    <div class="sub-footer">属性选择器footer</div>
    <div class="jd-footer">属性选择器footer</div>
    <div class="news-tao-nav">属性选择器</div>
    <div class="news-tao-header">属性选择器</div>
    <div class="tao-header">属性选择器</div><hr/>

伪元素选择器(css3)

  1. E::first-letter文本的第一个单词或字(如中文、日文、韩文等)
  2. E::first-line 文本第一行
  3. E::selection 可改变选中文本的样式
p::first-letter{  /* 选择的是当前文本的第一个单词或者第一个文字  */
             font-size: 30px;
             color: yellow;
         }
p::first-line{ /*  选中的是第一行 */
            color: chartreuse;
        }
p::selection{ /*  可以改变当前选中文字的样式   */
            color: pink;
        }
  1. E::before和E::after
    在E元素内部的开始位置和结束位创建一个元素,该元素为行内元素,且必须要结合content属性使用
  p::before{
            content:"开始";
        }
  p::after{
            content: "结束";
        }

css书写规范

空格规范
【强制】 选择器与 {  之间必须含空格
示例  .selector{}

【强制】属性名与之后的 ; 之间不允许包含空格,  :与属性值之间必须包含空格
示例   font-size:12px;
选择器规范

【强制】 当一个rule包含多个selector时,每个选择器声明必须独占一行

【建议】 选择器的嵌套层级应不大于3级,位置靠后的限定条件应尽可能精确

属性规范

【强制】 属性定义必须另起一行

	.selector{
		margin: 0;
		padding: 0;
	}

【强制】 属性定义后必须以分号结尾

	.selector{
		margin: 0;
		padding: 0;
	}
	 
	/*bad*/
	.selector{
	 	margin: 0
	 }

css背景(background)

  1. background-color 背景颜色
  2. background-image 背景图片地址
  3. background-repeat 是否平铺
  4. background-position背景位置
  5. background-addachment背景固定还是滚动

背景图片(image)

语法:
background-image:none | url(url)
参数:
none:无背景图(默认的)
url:使用绝对或者相对地址指定背景图像
backg-image背景图片
小技巧:提倡背景图片后面的地址,url不要加引号。

背景平铺

语法:

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

参数:
repea:背景图像在纵向和横向上平铺(默认的)
no-repeat :背景图像不平铺
repeat-x:背景在横向上平铺
repeat-y:背景在纵向上平铺
设置背景图片时,默认吧图片在水平和垂直方向平铺以铺满整个元素。

背景平位置(position)

语法:

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

参数:
length:百分数 | 有浮点数字和单位表示符组成的长度值。
position :top | center | bottom |left |center |right
说明:
1.position后面的x坐标和y坐标,可以使用方位名词或者精密单位
2.如果和精确单位和方位名字混合使用,则必须是x坐标在前,y坐标在后面

背景附着

语法:

background-attachment:scroll | fixed

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

背景简写

background属性的值的书写顺序推荐
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

背景透明(css3)

格式:background:rgba(0,0,0,0.3)
最后一个参数是alpha透明度 取值范围在0-1之间
注意:背景半透明是指盒子背景半透明,盒子里面的内容不受影响

背景缩放(css3)

通过background-size设置背景图片的尺寸
参数设置:
1.长度单位px或百分比(参照盒子的宽高)
2.设置为cover时,会自定调整缩放比例,保证图片始终填满背景区域。一处会被隐藏
3.设置为contain会自动调整缩放比例,保证图片始终填满背景区域。

多背景(css3)

以逗号分隔可以设置多背景,可用于适应布局
1.一个元素可以设置多重背景图像
2.每组熟悉年使用逗号分隔
3.如果设置的多重背景图之间存在这交集,前面的覆盖后面的
4.为了便面背景色讲图像盖住,背景色通常都定义在最后一组上

凹凸文字
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       body{
           background-color: #ccc;
       }
       div{
           color: #ccc;
           font:700 80px "微软雅黑";
       }
       div:first-child{
           /* text-shadow:水平位置  垂直位置模糊距离 阴影颜色; */
           text-shadow: 1px 1px 1px #000,-1px -1px 1px #fff;
       }
       div:last-child {

           /* text-shadow:水平位置  垂直位置模糊距离 阴影颜色; */
           text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;

       }

   </style>
</head>
 <body>
   <div>我是凸起文字</div>
   <div>我是凹起文字</div>
</body> 

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值