css样式

CSS是Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

以下是个人学习记录的一些笔记

1.基础语法

h1{color:red;font-size:14px}

h1是一个元素 样式{}包围

大括号里面是属性 用：对属性进行赋值 分号隔开不同属性

赋值如果大于一个单词，需要用引号，例如{font-family:"sans serif"}

在html中引入css

<link href="" type="" rel="">

选择器分组

h1,h2,h3{

​ color:red;font-size:14px

}

高级语法

继承

body {color:red;}

如果不单独设计样式，body里面的元素都会继承body里面的这个属性

派生选择器

li strong{color:red;}空格隔开

id选择器

<p id="pid"></p>

井号键pid {具体属性}

类选择器

<p class="classname"></p>

.classname {具体属性}

属性选择器head中

<style type="text/css">

[title]{color:blue;}

[title="t"]{color:red;}

</style>

body中

<p title="1">1</p>显示为blue

<p title="t">1</p>显示为red

2.css样式

1.css背景

常用属性

background-attachment 背景图像是否随页面滚动

background-color 设置元素的背景颜色

background-image 把图片设置为背景

background-position 设置图片的起始位置

background-repeat 设置图片是否及如何重复

background-size 规定图片的尺寸

body {

​ background-image:url("图片")；

​ background-repeat:no-repeat;

}

2.css文本

color 颜色

text-indent 首行缩进

text-transform 设置字母

text-shadow 阴影效果

word-wrap 规定文本的换行规则

p{

​ color:blue;

​ text-indent: 0em;

​ text-transform:多种属性值 看需要;

text-shadow:5px 5px 5px #ff0000;

}

3.css字体

{

​ font-size:40px;

​ font-family:fantasy;

}

自定义字体

@font-face{

​ font-family:myfont;

​ src:url();

}

div{

​ font-family:myfont;

}

4.css链接

a:link{

​ text-decroation:none//去掉下划线

​ -webkit-margin-before: 1rem; -webkit-margin-after: 1rem; margin: 0.8em 0px; position: relative; width: inherit; color: rgb(51, 51, 51); font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; white-space: pre-wrap;">}//未被访问的链接

a:visited{

}//用户已访问的链接

a:hover{

}//指针位于链接上方

a:active{

}//链接被点击

5.css列表

{

​ list-style-type: ; //列表类型

​ list-style-image: ; //列表项图标

}

6.css表格

{

​ border:1px solid color; //设置边框的颜色大小

​ border-collapse:collapse; //将边框合并为一条线

​ text-align: ；对齐方式

​

}

7.轮廓

用来突出元素

outline-color: //设置轮廓颜色

outline-style: //设置轮廓风格

outline-width: //设置轮廓宽度

8.css定位

position{

​ width: ;

​ height: ;

​

​ position: absolute;//不占位置

​ left:

​ top:

}

9.css浮动

{

​ float:left; //向左浮动

​ float:right; //向右浮动

​ clear:left；//清除左浮动

​ clear:right; //清除右浮动

}

3.盒子模型

基本属性

margin 外边距

border 边框

padding 内边距

content 内容

1.padding

{

​ padding: ;//所有

​ padding-left: ;

​ padding-right: ;

​ padding-top: ;

​ padding-bottom: ;

}

2.border

{

​ border-style: ;//边框样式

​ //同样可以有四个位置单独改变

​ border-width: ;//宽度

​ //也可以四个位置单独改变

​ border-color: ;

​ //也可以四个位置单独改变

}

border-radius: px;//圆角边框

box-shadow: ;//边框阴影

3.margin

跟内边距相似

{

}

4.外边距合并

了解

5.盒子模型应用

用来设计网页整体的框架

4.常用操作

1.对齐操作

*是通配符，所有的都会被影响

margin

{

​ margin-left:auto;

​ margin-right:auto;

​ //相当于居中操作

}

position

{

​ position:absoulute;

​ right:0px; //居右,其他同理

}

float

{

​ float:left;向左浮动 //居左

​ float:right;向右浮动 //居右

}

2.尺寸操作

width height基本高度，宽度

line-height:200% //二倍正常高度

还有最大最小宽高max ,min

3.分类

{

​ cursor: //各种类型

​ visibility: //设置元素是否可见

}

li{

​ display:inline //处于一行

}

4.导航栏

5.图片

5.选择器

1.元素选择器

基本操作

2.选择器分组

例如h1,h2{}

*{}通配符

3.类选择器

.class{}

结合选择器a.class{}

多类选择器.class.class{}

id选择器 #name{}

ID只能在文档中使用一次，类可以多次使用

ID选择器不能结合使用，使用js时会用到id

4.属性选择器

在头部

<style>

​ [title]{

​ color: ;

}

​ [title~="title"]

{

​ color: ;

}

</style>

body里面

<p title="">hello</p>

5.后代选择器

<p><strong>hello <i>666</i></strong> world</p>

样式里面写

p strong{}

p o{}

6.子元素选择器

<p><strong>hello <i>666</i></strong> world</p>

样式里面写

p>strong{}

p>strong>i{}

7.相邻兄弟选择器

紧接在一个元素后的元素，且二者有相同父元素

<li></li>

<li></li>

<li></li>

后面两个li

li+li{}