CSS(层叠样式表)入门

一、css简介

全称:Cascading  style  sheets
      层叠  样式  列表

二、css作用:

1、结构和样式分离的方式,便于维护与后期的修改

2、可以使用多套样式,使网页有任意样式切换的效果

3、使页面载入的更快,降低服务器的成本

三、样式表的分类:外部、内部、行内样式

1、创建内部样式表

例子:

p{
background-color:red;
font-size:20px;
}

2、选择器;

(1)能够选择定位到需要改变的标签元素
(2)作用:用来选择或者找到需要添加样式的位置
(3)常用选择器:标签选择器、类选择器

例:类选择器:

.p1{
			font-family: 黑体;
			background-color: yellow;
		}

3、使用内部样式完成背景设置:

1、background-color 颜色值 颜色作为背景颜色
2、background-image 图片位置 图片作为背景图片
3、background-repeat repeat repeat-x repeat-y no-repeat 背景图片的重复方向
4、backgorund-attachment scroll fixed 背景是否随着滚动条进行滚动
5、backgorund-position 背景图片的起始位置
6、backgorund 背景样式属性的组合

backgorund-position
一、
1、top left
2、center center
3、bottom right
二、
第一个是水平位置的百分比
第二个值垂直位置的百分比
x% y%
三、
第一个是水平位置
第二个值垂直位置
xpx ypx

4、创建并使用外部样式表

外部样式表就是新建一个文档,后缀是.css,里面全是css
通过link插入到html标签中
作用:使得网页的表示层和结构层彻底分离
//用于定义文档和外部资源的关系

//关系 //定义文件样式的类型 引用具体的文件

5、文本类的样式

1、对齐方式、文本修饰、文本转换缩进
color 表示颜色内容 设置文本颜色
direction ltr rtl 文本的方向/书写的方向
letter-spacing npx(n可以是负数) 字符的间距
line-height npx 行高
text-align left/right/center/justify(两端对其) 文本对齐方式

direction:ltr;
text-align:justify;
1、如果是字母和汉字的话,两者效果一样。
2、对于阿拉伯语来说,不一样。

text-decoration none,underline,overline,line-through 文本修饰下划线
text-shadow h-shadow,v-shadow,blur,color 文本设置阴影
text-transform none,capitalize,uppercase,lowercase 改变字母大小写
text-indent npx,xem 首行缩进

6、字体类样式:

font系列:font-style font-family

属性如下:
font-family 隶书、仿宋、楷体 设置字体
font-style normal、italic、oblique 设置斜体效果
font-weight normal、blod、100-900 文本的粗细设置
font-size npx 字体大小

四、列表

1、list-style-type none,disc,circle,square… 设置列表项目外观
2、list-style-position inside,outside 列表符号的位置
3、list-style-image url,none 把图片设置为列表项目的标记
4、list-style

无序列表:
none disc circle square decimal
有序列表:
lower-roman upper-roman lower-latin upper-latin

五、伪类样式

定义:通常情况下,超级链接的样式,称为伪类。
作用:设置超级链接的4种状态
注意:1、伪类是用在超级链接上的额效果比较多,但是超级链接不是伪类
   2、伪类是选择器

1、伪类选择器 状态伪类

(1)a:link 未访问的链接
(2)a:visited 已访问的链接
(3)a:hover 鼠标移动到链接上(浮动、悬停)
(4)a:active 向被激活的元素添加样式
(5):focus 选择拥有键盘输入焦点的元素

2、伪类分类 分为2类

(1)状态伪类
(2)结构性伪类
(结构性)伪类选择器
  1):first-child 选择元素的第一个子元素
  2):last-child …最后一个子元素
  3):nth-child() 选择某个元素的一个或多个特定的 子元素
  4):nth-last-child() 选择某个元素的一个或多个特定的 子元素,从最后一个开始算。
  5):first-of-type 选择一个上级元素下的第一个同类子元素

六、伪元素选择器

伪类选择器:选择一整段内容进行设置
伪元素选择器:选择其中的额一段或者一行进行设置
::selection 选择指定元素中被用户选中的额内容
::before 可以在内容之前插入新内容
::after 可以在内容之后插入新内容
::first-line 选择指定选择器的首行
::first-letter 选择文本的第一个字符

七、css其他选择器:

id,* 选择指定元素被用户选中的内容
逗号选择器 联合选择器
空格选择器 子孙(后代)选择器

选择器 子选择器(不是子孙后代)
+选择器 相邻兄弟选择器
[ ] 属性选择器

div是一个容器,后面画页面的重点

八、css的优先级

优先级只针对同一个对象而言

1、!important
2、行内样式
3、ID选择器
4、类(class)选择器
5、标签选择器
6、通配符*
7、浏览器的默认属性

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值