初识CSS3
2021-03-23 11:27
标签：加载 win 方法表 浏览器 重复 鼠标 16px 规范 链接 1.CSS3基本语法 2.HTML中引入CSS样式 3.CSS3基本选择器 基本选择器的优先级:ID选择器>类选择器>标签选择器 CSS的高级选择器：层次选择器，结构伪类选择器，属性选择器 选择器 示例 特别说明 标签选择器 h3 { color:red;} 标签选择器直接应用于HTML标签 类选择器 .class {color:blue;} 类选择器可在页面中多次使用 ID选择器 #id { color:green;} ID选择器在同一个页面中只能使用一次 4.字体样式 文本样式 5.文本阴影 6.使用CSS设置超链接 7.网页背景 8.CSS渐变 线性渐变：颜色沿着一条直线过渡：从左到右、从右到左、从上到下等 径向渐变：圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合 线性渐变语法：background: linear-gradient ( position, color1, color2,…) 初识CSS3 标签：加载 win 方法表 浏览器 重复 鼠标 16px 规范 链接 原文地址：https://www.cnblogs.com/yun---meng/p/12688679.html语法：选择器 { eg：h1{
声明1; font-size:12px;
声明2; color:#F00;
…… }
}
经验：CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上
行内样式
使用style属性引入CSS样式
内部样式表
CSS代码写在head>的style>标签中
外部样式表
CSS代码保存在扩展名为.css的样式表中
链接式
导入式
***链接式与导入式的区别
标签属于XHTML，@import是属于CSS2.1
使用链接的CSS文件先加载到网页当中，再进行编译显示
使用@import导入的CSS文件,客户端显示HTML结构，再把CSS文件加载到网页当中
@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
CSS样式优先级
就近原则：越接近标签的样式优先级越高
外部样式---->内部样式----->行内样式
属性名 含义 举例
font-family 设置字体类型 font-family:"隶书";
font-size 设置字体大小 font-size:12px;
font-style 设置字体风格 font-style:italic;
font-weight 设置字体的粗细 font-weight:bold;
font 在一个声明中设置所有字体属性 font:italic bold 36px "宋体";
属性 含义 举例
color 设置文本颜色 color:#00C;
text-align 设置元素水平对齐方式 text-align:right;
text-indent 设置首行文本的缩进 text-indent:20px;
line-height 设置文本的行高 line-height:25px;
text-decoration 设置文本的装饰 text-decoration:underline;
语法：text-shadow : color x-offset y-offset blur-radius;
eg：h2{
font-size: 18px;
text-shadow: blue 10px 10px 2px;
}
/ * color 阴影颜色
x-offset X轴位移，用来指定阴影水平位移量
y-offset Y轴位移，用来指定阴影垂直位移量
blur-radius 阴影模糊半径，代表阴影向外模糊的模糊范围 */
伪类名称 含义 示例
a:link 未单击访问时超链接样式 a:link{color:#9ef5f9;}
a:visited 单击访问后超链接样式 a:visited {color:#333;}
a:hover 鼠标悬浮其上的超链接样式 a:hover{color:#ff7300;}
a:active 鼠标单击未释放的超链接样式 a:active {color:#999;}
**设置伪类的顺序：a:link->a:visited->a:hover->a:active
backgroud属性
语法：background: 背景颜色 背景图像 背景定位 背景重复方式;
背景属性 描述 特别说明
background-color 背景颜色 背景颜色值：十六进制方法表示
background-image 背景图像 background-image:url(图片路径);
background-repeat 背景重复方式 repeat：沿水平和垂直两个方向平铺
no-repeat:不平铺，即只显示一次
repeat-x:只沿水平方向平铺
repeat-y:只沿垂直方向平铺
background-position 背景定位 属性值可以像素/百分比/方向关键词
background-size 背景尺寸 属性值可以是auto/percentage/cover/contain
