Css笔记

css语法规范

p 修改内容：修改成什么样子

p就是要选择要修改的地方 后面就是要修改什么东西 以及什么样子

css要跟html语言内容隔开

写在style里面

例如修改一段字体的大小和颜色

!感叹号是为了在Typoar里面显示html标签不被隐藏方便观看

!<p>这是一段字体</p>!

!<style>

p {

修改颜色为蓝色

color:bule;

修改字体大小（像素）修改为30像素后面必需带px px指的就是像素

font-size:30px;

}

</style>

类选择器的使用

如果html语言里面有多个p标签或者div等等其他标签想指定到某一个修改不想修改全部语法如下

定义一个类 red为类名可随意取名字 定义必需写.后面加类名 。可以定义多个类给下面的标签调用

.red {

写要修改为什么以及属性例如修改颜色（红色）

color: red;

}

写完以后调用类例如我只想修改下面第一个p标签的样子第二个不动

用想修改的标签调用上面写的red类 任何标签都可以 不只限p标签

!<p class="red">枫</p>!

!<p>晴天</p>!

类选择器记忆口诀：样式点定义 结构类（class）调用 一个或多个 开发最常用！

切记不能用html里面的标签名当类名只能使用英文

类建议多个定义不要所有元素都写在一个类里面 方便标签的调用使用

公共使用的元素定义到一个类里面

id类选择器

id类选择器和class类使用方法一样，唯一不同意的就是class类定义是用一个点.来定义但是id不一样id是用#来定义

注意！id只能被调用一次如果有标签调用过了那么他就不能再次被调用了而且class则是可以多个使用调用，id一般用于javascript一起使用

通配符选择器

通配符语法是* {

修改的样式和内容

}

通配符是把html所有的标签都选中了不需要被调用也不需要定义类名一个*号和花括号写要修改的内容就可以了

定义一个类 字体加粗： .bold { font-weight: bold; }

加粗的建议写法 将bold加粗的英文改成数字，数字不用带单位意思就是代替了bold加粗的意思可以自己定义加粗大小 类名是bold加粗的英文也是bold不要混淆了

.bold {
font-weight: 100;
}
<p class="bold">手中长枪定江山</p>

标题标签是特殊的需要自己指定才能更改 ! ! !

标签本身是加粗的如果不想加粗的话可以这样来写先指定他

更改为默认字体大小 默认英文是normal也可以写数字400这两个意思是一样的

400就是不变粗700就是变粗

h2 {
font-weight: 400;
}

字体风格的写法例如斜体

！<p>斜体字体</p>

p {
font-style: italic
}

让em本身就是斜体的字体变正

em {
font-style: normal
}

复合属性，简写方式

注意！修改值一定要按照顺序来写！而且size和family这两个属性必须有否则font属性无效！

p {
font: 400 italic normal
}

后代选择器（重点）

元素1和元素2和花括号都有空格

后代选择器可以修改父元素下面的子元素

元素1必须是父级 元素1和元素2中间要有空格

元素2可以是子标签也可以是孙标签只要包括在元素1里面即可

语法：元素1 元素2 {

修改的样式和内容

}

一层一层的修改例如要修改孙标签语法如下：

元素1 元素2 元素3 {

修改的样式和内容

}

如果有多个父元素相同那么我们可以修改父元素例如有多个ul父标签我们只想修改第一个那么我们可以修改其中一个ul标签将他定义一个class类例如：

<ul class="poi">
    <li><a>来找我！</a></li>
    
</ul>

在这里定义一个class类再到style里面写css

.poi li a {
​
}

子选择器

子选择器选中的是父标签下面的子标签不会选其他标签例如：

<diV class="qe">
    <a>我是子标签</a>
    <p>
        <a>我是孙标签</a>
    </p>
</diV>

选取子标签：

.qe>a {

}

语法：元素1>元素2 {

}

• 元素1是父级元素2是子级 中间用>隔开！

并集选择器

语法：元素1，元素2 {

}

例如：修改下面的数字为红色字体代码

<div>1111</div>
<p>22222</p>
<span>33333</span>

写法:

div,p,span {
  color: red;
}

语法规范建议竖着写！

最后一个元素不需要加逗号

伪链接选择器

盒子制作

制作盒子语法：

width:200px
height:200px 设置宽高
border-style:solid 设置边框为实线
border-color:red 设置颜色
border-width:1px 设置像素

简单写法：

border:red 1px solid 这样直接就可以做一个盒子
solid是实线边框
dashed是虚线边框
dotted是点线边框

覆盖写法：

一个盒子可以分开写但是覆盖的顺序不可以乱

width:200px
height:200px设置宽高
border:red solid 1px制作一个盒子颜色是红色
border-top:bule 1px solid覆盖top是顶部修改顶部为蓝色

盒子内容与边框的距

padding 可以设置盒子的边框和盒子里面的内容的距离

例如：想要盒子里面的内容跟边框距离左边远一点可以这样写就完成了距离设置

padding-left：20px；

简写

padding还有简写方法

设置padding一定会影响盒子的大小

解决方案

如果要设置盒子边框和内容的距离padding是一定需要的但是为了防止盒子被撑大挤到其他盒子我们可以去改盒子本身的高宽

如果盒子的高宽都是200，padding设置了20px那么盒子就应该修改为160 因为左右两边都有padding的20px加起来就是40，修改掉盒子本身的高宽就可以解决了！

外边距

margin是用于设置外边距的，就是控制盒子和盒子之间的距离

和内边距同样的语法

marigim-left 向左外边距

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin和padding的写法完全一样！

盒子居中对齐

list-style: none;这个是用来去掉li标签前面的小圆

盒子圆角

建立圆角盒子：

border-radius:10px;

盒子阴影的写法

如果想要鼠标经过才出现阴影的话那么就同样可以使用

div:hove {

width: 200px

height: 200px

background-color: pink

margin : 100px auto;

box-shadow:10px 10px 10px 10px rgba(0,0,0, .3) inset

}

rgba(0,0,0, .3)的意思是半透明 .3的意思是百分之30的黑色

浮动

清除浮动 （重点）

Icon Font & SVG Icon Sets ❍ IcoMoon文字库

溢出的文字省略号显示

先要强制一行内显示文本

white-space：nowrap；

超出的部分隐藏

overflow：hidden；

文字用省略号代替超出的部分

text-overflow：ellipsis；

取消输入框的蓝色光标

outline:none

取消掉文本域随便控制大小

resize：none