css基础

虽说菜鸟教程写的更全

css选择器

选择器结合使用作用更大,中间用空格分开

  • 派生选择器
/*最简单的,选择label然后设置属性,可以嵌套*/
div strong i {
    attribute: ;
}
/*也可以div i{}直接选取后代元素*/

/*但是子选择器只能一层一层选择*/
div>strong>i{}

<div ><strong > <i>!!!</i> <i>???</i> </strong><\div>
  • Id选择器
/*因为id是唯一的所以id选择的时候可以不需要派生选择器,但是不能结合其他的使用*/
#idname
{
	attribute: ;
}
  • Class选择器
.classname
{
	attribute:;
}
  • 属性选择器
/* 指定属性的类型不是标签的名字 比如title ,herf!!!...*/
[title]{
	attribute1:1;
}

/* 属性选择器也可以指定特定属性的名字*/
[title='asdf']
{
    attribute:..;
}
[title~='as'] /*关键字匹配,包含关键字即匹配*/
<div title='asdf'>qrew</div>
<div title='asfd'></div>
<div title>qwerwr</div>
  • **通配符 *** 如果存在通配符,那么如果你没有给一个标签自定义,则自动拥有通配符的属性
/*通常定义外内边界*/
* {
	padding:0px;
	margin:0px;
}

css 属性

单位讲解

参考这个

背景

  • background-attachment:背景图像是否滚动;

  • background-color:背景颜色;

  • background-img:背景设置为图片;

  • background-position:背景图片起始位置;

  • background-repeat:背景是否重复及如何重复;

  • background-size父亲元素的size作为参考进行缩放

    image-20201023161102985

    如果background以手机屏幕大小为例 父亲大小为屏幕大小

    background-size:100% 100%;效果是长和宽同时拉伸

    background-size:cover 同比例放大或缩小长或宽,然后截取父亲的size部分(所以会有些部分不会显示在背景区域)和background-size:100%的效果相同

    background-size:contain 放大长或宽填满size就行了?(不太懂反正用100% 100%就完事了)

文字

/*
{
	color: 字的颜色;
	padding:字与边框的间距;
	direction:文本方向;
	text-align:对齐文本;
	text-decorate:修饰文本; 比如超链接有下划线,可以把这个属性变为none就没了
	word-spacing:字间距;
	letter-spacing:字符间距;
	text-indent:首行缩进em;
	text-shadow:阴影离字前方的距离 px阴影离字上方的距离 px 阴影后方距离px阴影颜色color;字阴影

	font-size:字体大小px;
	font-family:字体样式; (如果第一个字体样式不适用该文字自动向后查找,如果找不到会用默认样式。可以用此特性设置中英文不同字体)
        如果没有可以
        @font-face{
            font-family:yourfontname;
            src:url();
        }
        之后使用yourfontname可以自动从src下载
}
*/

链接

  • a:link 普通的,未被访问过的链接
  • a:vistied 访问过的链接
  • a:hover 鼠标位于链接上方
  • a:active 链接被点击时刻时

浮动 float

与left,right相似但是浮动不占不浮动的'位置',但是浮动之间还是在同一层,也可以设置position来控制不同的层级

浮动优先横向排满,再纵向增加

  • left,right 向左向右浮动
  • none 元素不浮动
  • inherit 继承父亲的浮动属性
  • clear:xxx 去掉xxx的浮动效果
clear:left; /*去掉向左浮动效果*/

列表标签 ul

感觉好多,随便写写了

通常形式如下

<ul>
	<li>...</li>
	<li>..</li>
</ul>

通常设置display margin padding float属性

比如display: inline 可以横向排放

盒子模型 container

盒子模型包括外边距(padding),内边距(margin),内容(content),边框(broder)

#paddingattribute{
	padding:;
	padding-left:;
    padding-right:
	padding-bottom:;
}
#marginattribute{
    margin:;
    margin-left:;
    margin-right:;
    margin-bottom:;
}

#broderattribute{
	border:;
   	border-top|left|right|bottom-width:;
    border-top|left|right|bottom-color:;	
    border-radius:px;/*边框圆滑度*/
    box-shadow:apx bpx cpx color; /*边框阴影*/
    border-img:;
}

2D,3D旋转 transform

这个属性太多还是直接看文档吧

动画效果 animation

有六种属性(必须规定前两种属性)

  • animation-name

  • animation-duration

  • animation-timing-function

  • animation-delay

  • animation-iteration-count

    n或infinite(无限次)

  • **animation-direction **

    normal:正常播放

    alternate:轮流反向播放

定义了animation一定要(定义keyframes)

{
    animation: animation_name 5s infinite alternate
	/*
    指定浏览器上的animation
    webkit-animation:animation_name time
    */
}

@keyframes animation_name{
	0%{...}
	23%{..}
	...
}
/*指定浏览器上的关键帧*/
@-webkit-keyframes animation_name{
    0%{...}
    ...
}

过渡 transition

包括四种属性:

  1. transition-property(过渡的名称,旋转之类的)

  2. transition-duration(过度花费的时间)

  3. trainsition-timing-function(过渡曲线)

  4. trainsition-delay(延迟多久开始)

{
	transition:1 2 3 4;
    /*也可以直接指定属性赋值*/
    transition-property:...;
}
posted @ 2020-10-23 15:41  Sakura_Momoko  阅读(100)  评论(0编辑  收藏  举报