码迷,mamicode.com
首页 > Web开发 > 详细

CSS

时间:2019-10-13 20:47:22      阅读:243      评论:0      收藏:0      [点我收藏+]

标签:的区别   参照物   oat   tee   结束   isp   嵌入   浮动   set   

CSS语法

CSS样式由两个部分组成:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束.

CSS注释

/*这个是注释*/

CSS的几种引入方式

1. 行内样式

行内式是在标记的style属性中设定CSS样式,不推荐大规模使用.

<p style="color:red">你好!</p>

2.内部样式

内部样式,也就是嵌入式是将CSS样式集中写在网页的标签中标签中.

<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        p {
            background-color: #2b99ff;    
        }
    </style>
</head>

3.外部样式

外部样式就是将css写在一个单独的文件中,然后在页面进行引入即可.推荐使用

<link href="样式名.css" rel="stylesheet" type="text/css/"/> # 引入语句

CSS选择器

基本选择器

/*元素选择器*/
p {color:red;}
/*ID选择器*/
#id {background-color:red;}
/*类选择器*/
.class {font-size: 15px;}
/*通用选择器*/
* {color:red;}
@注意:
    样式类名不要用数字开头(有的浏览器不认识).
    标签中的class属性如果有多个,要用空格分隔.

组合选择器

/*后代选择器*/
li a {color:green;} --li标签中的所有a标签设置字体颜色为绿色(包括下下级等所有的a标签)
/*儿子选择器*/
div>p {font-size:10px} --div标签中的下一级的p标签的字体为10px.(不包括下下级)
/*毗邻选择器*/
div+p {font-size:10px} --紧挨着div标签的一个p标签的字体为10px.
/*弟弟选择器*/
div~p {fond-size:10px} -- div标签之后的所有p标签字体为10px,不管中间穿不穿差其他标签

属性选择器

p[title] {color:red;} -- 含有title属性的p标签的颜色为红色.(属性也可以携带参数,更加精确找到标签) 

分组和嵌套

/*分组*/ --> 当多个元素的样式相同的时候,我们没有必要重复地为每个元素设置样式,可以用逗号隔开
div,p {color: red;} -- 所有div和p标签的颜色都为红
/*嵌套*/ --> 多个选择器混合使用
.c1 p {color: red;} -- .cl下面的所有p标签的颜色都为红色

伪类选择器

a:link {color:red;} -- 未被访问过的连接为红色
a:hover {color:blue;} -- 鼠标悬停到链接上方的颜色为蓝色
a:active {color:yellow;} -- 鼠标右键选中后的颜色为黄色
a:visited {color:pink;} -- 已经被访问过的颜色为粉色
input:focus {background-color:red;} -- 文本框被选中后的样式

伪元素选择器

1. first-letteer
p:first-letter {font-size:48px;color:red;} -- p标签的第一个字符的字号为48px,颜色为red红

2. before
p:before {content="我是超哥!"} -- 在所有p标签前面插入"我是超哥!"这几个字符

3. after
p:after {content="我是超哥!"} -- 在所有p标签之后插入"我是超哥!"这几个字符

选择器 的优先级

内联选择器 --> id选择器 --> class选择器 --> 元素选择器 [--> 继承来的属性]

除此之外还可以通过!importent的方式来让样式强制生效(最好不要使用)

CSS属性相关

文字属性

1. 文字对齐
text-align 
    - left:左对齐,
    - right:右对齐,
    - center:居中对齐,
    - justfy:两端对齐
2. 文字装饰
text-decoration 
    - none:定义标准的文本
    - underline:定义文本下的一条线
    - overline:定义文本上的一条线
    - line-through:定义穿过文本中心的一条线
    - inherit:继承父类到的tetx-decoration
3. 首行缩进
text-indent:32px; -- 首行缩进32px
4. 文字间的距离
letter-spacing: 5px; -- 将文字的间距调整为5px
5. 去掉li标签的样式
list-style:none;

背景属性

1. 背景颜色
background-color:red
2. 背景图片
background-image:url("1.jpg")
3. 背景重复
    - repeat(默认):背景图片平铺排满整个网页
    - repeat-x:背景图片只会在水平方向上平铺
    - repeat-y:背景图片只会在垂直方向上平铺
    - no-repeat:背景图片不平铺
4. 背景位置 -- 对精灵图的设置
    background-position: left top;
    background-position: 200px 200px

@注意:还可以简写
    background:red url('1.png') no-repeat left top;

边框

1. 边框属性
    - border-width
    - border-style
    - border-color
    - 通用简写方式 p { border: 2px solid red;}
2. 边框样式 border-style
    - none:无边框
    - dotted:点状虚线边框
    - dashed:矩形虚线边框
    - solid:实线边框

@边框还可以单独的为某方向的边框设置样式
    
3. 边框设置圆角(这个也可以把一个矩形变为圆形,参数为50%就可以)
    border-radius

display属性

1. 用于控制HTML元素的显示效果
    - display:none : HTMl文档中元素存在,但是浏览器中不显示
    - display:block : 默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充下面的部分
    - display:inline : 按行内元素显示,此时再设置元素的width,height,margin-top,margin-bottom和float属性都不会有什么影响
    - display:inline-block : 使元素同时具有行内元素和块级元素的特点

2. display:none 和 visibility:hidden的区别:
visibility:hidden : 可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间.也就是说,该元素虽然被隐藏了,但是仍然会影响布局.
display:none : 可以隐藏某个元素,并且隐藏的元素不会占用任何空间.也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失.

盒子模型

1. margin: 用于控制元素与元素之间的距离;margin的最基本的用途就是控制元素周围空间的间隔,从视觉角度上达到隔开的目的.
2. padding: 用英语控制内容和边框之间的距离.
3. border(边框): 围绕在内边距和内容外的边框
4. content(内容): 盒子的内容,显示文本和图像

______________________________________________
|               margin(外边框)             |
|   _______________________________________  |
|   |           border(边框)             |  |
|   |   ____________________________      |  |
|   |   |       padding(内填充)    |     |  |
|   |   |   ___________________    |      |  |
|   |   |   |                 |   |     |  |
|   |   |   |   content(内容)  |   |      |  |
|   |   |   |                 |   |     |  |
|   |   |   |___________________|  |      |  |
|   |   |                        |      |  |
|   |   |___________________________|     |  |
|   |                                   |  |
|   |______________________________________|  |
|                                          |
|______________________________________________|

float浮动

在css中任何元素都可以浮动
浮动元素会生成一个跨级框,而不论本身是什么元素
浮动的两个特点:
    1. 浮动框可以向左或者向右移动,直到他的外边缘碰到包含框或另一个浮动框的边框为止.
    2. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在
三种取值:
    1. left: 向左浮动
    2. right: 向右浮动
    3. none: 默认值,不浮动

clear

clear属性规定元素的那一侧不允许其他浮动元素
    - left: 在左侧不允许浮动元素.
    - right: 在右侧不允许浮动元素
    - both: 左右两侧都不允许浮动元素
    - none: 默认值,允许两侧浮动
    - inherit: 规定应该从父元素继承clear属性
@注意: clear属性只会对自身起作用,而不会影响其他元素

清除浮动:
清除浮动的副作用(父类塌陷问题)
    主要有三种方法:
        1. 固定高度
        2. 伪元素清楚法 (使用较多)
        3. overflow:hidden
    
    .clear:after {content=""; display=block; clear:both;}

overflow溢出属性

visible: 默认值.内容不会被修剪,会呈现到元素框之外
hidden: 内容会被修建,并且其余内容不可见
scroll: 内容会被修建,则浏览器会显示滚动条以便查看其余内容
auto: 如果内容被修建,则浏览器会显示 滚动条以便查看其余内容
inherit: 规定应该从父类继承overflow属性的值

    - overflow (水平和垂直都设置)
    - overflow-x (设置水平方向)
    - overflow-y (设置垂直方向)

max-width:最大宽度
min-width:最小宽度

定位(position)

static:
    默认值,无定位,不能当做绝对定位的参照物,并且设置标签对象的left,top等值是不起作用的
relative(相对定位):
    相对定位是相当于钙元素在文档流中的原始位置,即以自己原始位置为参照物.有趣的是,即使设置了元素的相对定位以及偏移值,元素还站着原来的位置,即占据文档流空间,对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档中的偏移位置.而其层叠通过z-index属性定义

    @注意: position: relative的一个主要方法:方便绝对定位元素找到参照物
    
absolute(绝对定位):
    设置为绝对定位的元素框从文档流完全删除,并且相对于最近的已定位祖先元素定位,如果元素没有已定位的祖先元素,那么他的位置相对于最初的包含块(即body元素).元素原先在长长文档流中所占的空间会关闭,就好像该元素原来不存在一样.元素定位后生成一个块级框,而不论原来他在正常流中生成何种类型的框.
        
fixed(固定):
    对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点: 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点,因为这是两个不同的流,一个是浮动流,另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
    @注意:在理论上,被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标,不论窗口是否滚动,它都会固定在这个位置。

脱离文档流: 绝对定位,固定定位
不脱离文档流: 相对定位

z-index

设置对象的层叠顺序。
    - z-index 值表示谁压着谁,数值大的压盖住数值小的,
    - 只有定位了的元素,才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素不能使用z-index
    - z-index值没有单位,就是一个正整数,默认的z-index值为0如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面压着别人,定位了元素,永远压住没有定位的元素。
    - 从父现象:父亲怂了,儿子再牛逼也没用

opacity设置透明效果

用来定义透明效果。取值范围是0~1,0是完全透明,1是完全不透明。

CSS

标签:的区别   参照物   oat   tee   结束   isp   嵌入   浮动   set   

原文地址:https://www.cnblogs.com/xiongchao0823/p/11667934.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!