首页 > > 网页制作 > css >

css基础总结

2019-08-26 05:46:21来源：博客园阅读 ()

css基础总结

css作用：控制网页的样式 css语法： 选择符{ 属性1：属性值；属性2：属性值；属性3：属性值1 属性值2 属性值3； } css实例： div{ width:300px; height:400px; background:red; } css语法解释： 1、选择符：对标签进行获取 2、所有声明都放在大括号里面，声明和声明之间用分号（“；”）连接 3、声明包括属性及属性值，属性和属性值之间用冒号连接 4、如果一个属性拥有多个属性值，属性值之间用空格隔开例：border（边框）:10px(像素大小) red（颜色） solid（线的类型）; 注：所有的css代码，必须放在“css样式表”内！！！ 扩展：css样式表内的注释：/* css的注释 */

css样式表

css样式表： 一、内部样式表： 创建方法：使用style标签创建样式表,然后把样式表最好放在head描述区内 <style type="text/css"(可以省略)> css代码 </style> 二、外部样式表： 创建方法：新建一个.css文件外部导入方式： 1、<link rel="stylesheet" href="url"> rel="stylesheet" //创建关联性 href="url" //导入的路径 type="text/css" //css文本类型 2、<style> @import url（路径）; </style> link 和 @import 区别 1、本质区别：link标签属于html语言、@import属于css提供的一个方法 2、加载顺序的差别：link导入的css 和结构同时加载、@import需等结构加载完毕然后再加载css样式 3、兼容性差别：@import兼容性不好（IE5） 4、js动态dom操作差别：js动态可能无法修改@import所导入的css样式 三、内联样式表 创建方： <标签 style="css代码"></标签> 样式表的权重关系 内联样式表权重最高内部样式表和外部样式表的权重关系和书写的顺序有关，写在后面的权重高后面的把前面的样式覆盖，覆盖的只是相同属性，不同属性继续执行注：内联样式表只对当前标签起作用

css选择符 css选择符的目的：对网页的元素进行获取 一、类型选择符（标签选择符） html中所有标签懂能直接作为选择符 (div、p、h1-h6......) 特点：能选择页面中所有相同类型的元素应用： 1、如果想统一某个标签样式的时候 2、想改变某个默认样式的时候 二、id选择符 语法： <标签 id="名称"></标签> id样式表写法：#名称{css代码} 特点：id名称在同一页面只能出现一次，唯一性应用：id名称常用来写页面的外围结构 三、class选择符 语法： <标签 class="名称"></标签> .名称{css代码} 特点：每一个元素都可以拥有多个类名适合定义一类样式 四、群组选择符 语法：以逗号“，”分隔的方式，把多个选择符组成一组选择符1，选择符2，选择符3{css代码} 例： #box,.cont,p{ } 五、包含选择符（子选择符） 语法：通过父元素找子元素，父元素与子元素之间用空格隔开父元素选择符子元素选择符{ } 六、伪类选择符 a:link{} 超链接初始状态 a:visite{} 超链接访问过后的状态 a:hover{} 超链接鼠标滑过的状态 a:active{} 超链接按下时的状态例： a:link{color:purple;} a:visited{color:pink;} a:hover{color:yellow} a:active{color:green} 注：顺序不能更改常用形式： a{color:red} a:hover{color:yellow;} div:hover{} .box:hover{} 鼠标滑过父元素改变子元素的样式：父元素：hover 子元素{} 七：通配符 语法： *{} 用来改变页面所有元素的样式，通常用来清除元素的留白常用方法： *{ margin:0; padding:0; } 选择符权重 !important > 内联样式表 > id > class（伪类）> 类型（标签）内联样式表： 1000 id : 100 class/伪类 : 10 类型 : 1 包含选择符：为选择符权重之和群组选择符：权重保持不变扩展： !important ( 如果一个css属性后面有!important,当前属性具有最高权重。 ) 语法：属性：属性值！important; css层叠性 只要产生权重关系，必然体现css层叠性权重高的覆盖权重低的，权重相同的优先执行后书写的 文本属性 font-size: 像素　　网页中文本默认大小： 16px; 　　注：文本大小一般都是偶数、pc端文本大小最小别低于12px；　　涉及到的单位：　　px 　　pt 　　em 1em == 16px( 默认情况下 ) （相对大小、相对于父元素font-size的值） line-height: 行高　　如果line-height的值等于容器高度的时候，实现单行文本垂直居中对齐 font-family: 字体默认的字体：微软雅黑　　宋体、楷体、微软雅黑......安全字体（大部分浏览器能支持的）　　注：　　如果字体为中文：放在引号里面　　如果英文字体字体名称是多个单词的时候，放在引号里面　　如果有多个字体，字体和字体之间用逗号隔开；英文在前中文在后 color： 文本颜色　　颜色：必须使用十六进制表示颜色值。　　16进制数字（ 0-9 a-f ）　　#000000 #000 　　#ffffff #fff 　　红绿蓝 0带表最暗 f代表最亮　　扩展：　　rgb(255,0,0)模式　　rgba(255,0,0,0.5) a 颜色值透明。　　transparent 透明色 font-weight: 　　属性值：bold（加粗） bolder（更粗的） normal（常规） 100 - 900 font-style: 　　属性值: italic（倾斜） oblique（更倾斜） normal（常规） font-variant: 　　属性值：normal small-caps（缩小的大写） text-align: 文本的水平对齐方式　　属性值： left right center justify(两端对齐) text-decoration 　　属性值：none underline（下划线） overline（上划线）　　line-through（删除线） blink(闪烁，高版本不支持) text-indent: 　　首行缩进: text-indent:2em; 　　悬挂式缩进： text-indent:负数 letter-spacing:30px; 　　字符与字符之间的间距 word-spacing:30px; 　　词与词之间的间距（依据空格判断） text-transform: 属性值: 　　capitalize ( 首字母大写 ) 　　uppercase ( 大写 ) 　　lowwercase (小写) 列表属性 list-style-type: disc(实心圆) 定义列表符号样式 list-style-image：url 使用图片作为列表符号 list-style: none 清除列表符号！ list-style-position: outside(外边)/inside(里边) 使用图片作为列表符号 边框属性 border:10px solid red; 复合式写法（简写） border-width:10px; border-style:线形； border-color:颜色 常用的线型：solid( 实线 ) dashed (虚线) dotted( 点状线 ) double(双线) none/0 给单一方向设置边框 　　border-left/right/top/bottom ： 10px solid red border设置方法： 　　border复合式写法的后面的3属性值，可单独拆分出来。　　单独拆分出来的属性例如：border-width: 　　border-width:10px; 四周　　border-width:10px 20px; 上下左右　　border-width:10px 20px 50px 上左右下　　border-width:10px 20px 50px 100px 上右下左 背景属性 1: background-color:颜色值 ( 背景色一直会平铺到边框区域 ) 2: backgrond-image:url(); 背景图默认情况下背景图的展示形式：容器大于背景图 -> 铺满容器等于背景图 -> 显示一张容器小于背景图 -> 只显示容器区域 3：background-repeat: 属性值： no-repeat 不平铺 repeat repeat-x repeat-y 4:background-position 控制背景图的位置属性值：两个属性值第一个水平位置（距离左侧的距离）第二个垂直位置（距离顶端的距离） background-position:100px 100px; background-position:right bottom background-position:center bottom 5:background-attachment 控制背景图是否固定 ( 滚动条 ) 属性值：scroll fixed; 简写： background:red url（） no-repeat left right; 网页中的图片的展示形式： img导入的图片(占空间) 背景图（不占空间） css浮动属性 语法：float:none/left/right; 添加浮动的元素，不占据空间、脱离文档流注：只要有浮动，父元素一定添加高度、否则父元素会出现” 高度塌陷 “ 盒模型 一、padding用法： 1：padding是在盒子里面，在盒子与内容之间。 2：padding的作用：控制子元素在父元素里面的位置关系。 3：padding会把盒子撑大。 4：如果想让盒子保持原有的大小：在宽高基础上减掉padding值。（如果一个元素是被内容撑开的，没有设置固定的宽高，padding直接撑开。不用减掉） 5:如果给单一方向添加padding值　　padding-top/bottom/left/right 6:padding的设置特点：　　padding:30px; 四周　　padding:10px 30px; 上下左右　　padding:10px 30px 50px 上左右下　　padding:10px 30px 50px 100px 上右下左 7:padding不会对背景图的位置造成影响。二、margin用法：外边距 1、margin在元素的外围，不会改变元素的大小 2、作用：控制元素之间的距离 3、给单一一方向添加margin：同上（padding） 4、margin的设置特点：同上（padding） 5、margin：0 auto; 左右居中 6、margin常出现的Bug 　　a:两个相邻的元素上下margin值，不会叠加，按最大值

原文链接:https://www.cnblogs.com/peizilu/p/11394440.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有