单页简洁手机网站模板,聊城正规网站建设设计公司,微信公众平台注册订阅号,wordpress 上传头像文章目录 前言1、字体和文本属性2、边距和填充3、border边框4、列表属性 前言 上一篇我们学习了CSS扩展选择器以及它的继承性#xff0c;对于页面元素样式设置相信大家都不陌生了。 这一篇我们就来看看具体都有哪些样式可以设置#xff1f;又该如何设置#xff1f; 喜欢的【… 文章目录 前言1、字体和文本属性2、边距和填充3、border边框4、列表属性 前言 上一篇我们学习了CSS扩展选择器以及它的继承性对于页面元素样式设置相信大家都不陌生了。 这一篇我们就来看看具体都有哪些样式可以设置又该如何设置 喜欢的【点赞】【关注】【收藏】 1、字体和文本属性
字体属性
CSS的字体属性用于定义字体类型、字号大小以及字体是否加粗等常用属性如下
属性名说明举例font设置字体的所有样式属性font:bold 12px宋体font-family定义字体类型font-family:宋体font-size定义字体大小font- size:12pxfont-weight定义字体大小font- weight:boldcolor字体颜色color:red;(颜色取值可以为颜色的英文单词也可以采用#00000F#FFFFF之间的取值)
示例
文本属性
文本属性用于定义文本的外观包括文本颜色、行高、对齐方式以及字符间距
属性名说明应用场景line-height设置行高(即行间距)常用取值为25px、28px布局多行文本text-align设置对齐方式常用的取值为left、right以及center各种元素对齐letter-spacing设置 字符间距常用的取值为3px、8px加大字符间间隔text-decoration设置文本修饰常用的取值为underline (下划线)、none加下划线中划线等
示例
2、边距和填充
主要分为外边距和内边距内边距又称为填充
margin-外边距边距边框到其他元素的距离padding-内边距填充内容和边框之间的距离
说明margin和padding使用语法一样只不过是把margin换成了padding所以我们就以margin来说明大家知晓一下即可 CSS3边距属性margin用于设置元素周围的边界宽度,主要包括上下左右4个边界的距离设置。填充属性padding也称为补白属性,用于设置边框和元素内容之间的间隔同样包括上、下、左、右4个方向的值。 仅设置一个值则应用于所有的四个边距 设置两个值表示上下左右边距 设置三个值表示上左右下边距 设置四个值则按照上右下左的顺序对应四个方向边距
示例以margin为主padding跟margin使用一样只不过是把margin换成了padding
3、border边框
CSS3常见的边框属性有border-style属性、border-width属性、border-color属性和复合属性border。
属性名说明示例border-style设置边框的样式取值: none 无边框、solid 实线以及dashed虚线等border-style:solidborder-width设置边框的宽度border-width:1pxborder-color设置边框的颜色border-color:redborder复合属性用于设置边框宽度、样式以及颜色border:1 px solid red
示例
圆角边框border-radius
在css3.0中又添加了一个新的属性border-radius使用border-radius这个属性可以实现圆角边框的效果。border-radius属性通过设置圆角的半径实现圆角边框其中半径的像素值越大圆角边框的效果越明显。
示例 4、列表属性
列表属性主要用于设置列表项的样式包含list-style-type属性、list-style-image属性、list-style-position属性和 list-style属性。
属性名说明list-style-type用于设定列表项的符号取值: None (无)、Disc (实心圆)、Circle (空心圆)、Square (实心方块)。list-style-image用于设定图像作为列表项目符号其值为图像对应的url。list-style-position用于设定项目符号在列表项的位置 取值: inside、 outside (默认值)。list-style复合属性,用于设置列表属性,其顺序为: list-style-type、list-style-position、list-style-image
示例 好了就到这里吧大家抓紧时间去学习吧 后续内容持续更新中创作不易【点赞】【关注】【收藏】支持一下哦 祝各位看官万福金安 ⭐️徒手摘星爱而不得世人万千再难遇我。⭐️
